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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
js生成随机数方法和实例
Jan 17 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php5.2时间相差8小时
2007/01/15 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
JavaScript代码调试方法实例小结
2019/01/05 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Python实现文件信息进行合并实例代码
2018/01/17 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
销售人员个人求职信
2013/09/26 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
新闻稿怎么写
2015/07/18 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
css height属性中的calc方法详解
2021/06/03 HTML / CSS
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
python区块链持久化和命令行接口实现简版
2022/05/25 Python