js 利用image对象实现图片的预加载提高访问速度


Posted in Javascript onMarch 29, 2013

大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关。现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度。

一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。

Image()对象
最简单的图像预装载办法是使用JavaScript新建一个新的Image()对象,然后将希望预装载的图片URL传递给此对象。假设我们拥有一个名为heavyimagefile.jpg的图片文件,我们希望当用户鼠标指针移动到一张已有的图片上时显示此文件。为了能更快的对此文件进行预装载,我们简单的创建了一个名为heavyImage的新Image() 对象,然后将其通过onLoad()事件句柄同步装载到页面上。

<html> 
<head> 
<script language = "JavaScript"> 
function preloader() 
{ 
heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg"; 
} 
</script> 
</head> 
<body onLoad="javascript:preloader()"> 
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"> 
<img name="img01" src="justanotherfile.jpg"></a> 
</body> 
</html>

注意,图片的标签(tag)本身并不处理onMouseOver()以及onMouseOut()事件,这也正是上面示例中的<img>标签被包括在<a>标签中的原因。标签<a>则包括了对这些事件类型的支持。

通过数组(arrays)装载多个图片
在实际情况中,你很有可能需要预装载不止一张的图片;比如,对于包括多个图片的菜单条,或者希望实现平滑的动画效果。要实现这些并不困难,只需要利用JavaScript的数组,如下例所示:

<script language="JavaScript"> 
function preloader() 
{ 
// counter 
var i = 0; 
// create object 
imageObj = new Image(); 
// set image list 
images = new Array(); 
images[0]="image1.jpg" 
images[1]="image2.jpg" 
images[2]="image3.jpg" 
images[3]="image4.jpg" 
// start preloading 
for(i=0; i<=3; i++) 
{ 
imageObj.src=images[i]; 
} 
} 
</script>

在上面的例子中,定义了变量i以及名为imageObj的Image()对象。然后定义了新数组images[],每一个数组元素将存储需要预装载图片的地址来源。最后,使用一个for()循环来遍历整个数组,并对每个元素指定Image()对象,以此将图片都预装载到缓存中。
Javascript 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
js简单时间比较的方法
Aug 02 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
JS数据类型分类及常用判断方法
Nov 19 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
jquery无缝向上滚动实现代码
Mar 29 #Javascript
验证码按回车不变解决方法
Mar 29 #Javascript
Jquery 自定义动画概述及示例
Mar 29 #Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 #Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 #Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 #Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 #Javascript
You might like
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
8个必备的PHP功能开发
2015/10/02 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python实现挑选出来100以内的质数
2015/03/24 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
怎样使用Python脚本日志功能
2016/08/14 Python
理解python中生成器用法
2017/12/20 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
python扫描线填充算法详解
2020/02/19 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
行政管理专业推荐信
2013/11/02 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
军人违纪检讨书
2014/02/04 职场文书
意向书范本
2014/07/29 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python