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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Python实现简单的代理服务器
2015/07/25 Python
python中list列表的高级函数
2016/05/17 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
python中xlutils库用法浅析
2020/12/29 Python
python自动化办公操作PPT的实现
2021/02/05 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
市场营销专业个人求职信范文
2013/12/14 职场文书
毕业生自荐信格式
2014/03/07 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
学校开学标语
2014/10/06 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis