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 判断代码全收集
Apr 28 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
javascript事件处理模型实例说明
May 31 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Vue.js对象转换实例
Jun 07 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 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采集中国代理服务器网的方法
2015/06/16 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
Python金融数据可视化汇总
2017/11/17 Python
基于Django用户认证系统详解
2018/02/21 Python
巴西购物网站:Submarino
2020/01/19 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
初一学生期末评语
2014/04/24 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
销售员岗位职责
2014/06/09 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
万里长城导游词
2015/01/30 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL