js预载入和JavaScript Image()对象使用介绍


Posted in Javascript onAugust 28, 2011

预载入和JavaScript Image()对象

很多high-res图像真的可以使 Web 站点更加整洁。但是它们也会使站点的访问速度变慢——图像是文件,文件使用带宽,带宽直接与等待时间相关。是该了解如何通过一个叫做图像预载入(preloading)的技巧来提高 Web 站点的访问速度的时候了。
图像预载入
对于浏览器载入图像来说,只有在对图像发送一个 HTTP请求之后,它们才会被浏览器载入,对图像的 HTTP 请求要么使用 <img> 标记,要么通过方法调用实现。如果使用 JavaScript 脚本来处理在 mouseover 事件时交换图像,或者在一段时间之后自动更改图像,那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接,或者要获取的图像非常大,或者其它一些情况,这种现象就特别明显;这样,延迟就造成你不能达到自己期望的效果。
一些浏览器采用一些措施来缓解这一问题,比如试图通过在本地缓存中存储图像,从而使随后对图像的调用能够立即被满足;但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施,当真正需要图像时,它就可以被立即从缓存中取出,从而能够立即显示。
Image() 对象
预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象,然后将需要载入的图像的 URL 作为参数传入。假设我们有一个图像叫做heavyimagefile.jpg,在用户的鼠标放到一个已经显示的图像之上时,我们希望显示这个图像。为了预载入这一图像从而得到较快的响应时间,我们简单地创建一个 Image() 对象 heavyImage,然后在 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>

请注意,图像标记本身不能处理 onMouseOver() 和 onMouseOut() 事件,这就是上例中<img> 标记被包含在一个<a> 标记之中的原因,<a> 标记支持这两个事件类型。
使用数组载入多个图像
在实际应用中,我们可能需要预载入多个图像,而不止一个;例如,在一个包含多个图像翻卷的菜单栏中,或者在我们试图创建平滑效果时,都需要预载入多个图像。其实这并不困难,只要使用 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和一个 Image() 对象 imageObj。然后定义了一个新数组 images[],每个数组元素存储要被预载入的图像。最后,创建一个 for() 循环来处理整个数组,并将每个元素赋给 Image() 对象,这样将其载入到缓存中。
onLoad() 事件处理器
像很多 JavaScript 的其它对象一样,Image() 对象也有一些事件处理器。其中最有用的一个肯定是 onLoad() 处理器,它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来,以在图像完全载入之后执行一些特定的任务。下面的例子说明了这一点,在这个例子中,首先在图像载入时显示一个“please wait”屏幕,然后在载入完成时将浏览器转到一个新的 URL。
<html> 
<head> 
<script language="JavaScript"> 
// create an image object 
objImage = new Image(); 
// set what happens once the image has loaded objImage.onLoad=imagesLoaded(); 
// preload the image file 
objImage.src='images/image1n.gif'; 
// function invoked on image load 
function imagesLoaded() 
{ 
document.location.href='index2.html'; 
} 
</script> 
</head> 
<body> 
Please wait, loading images... 
</body> 
</html>

当然,你还可以创建一个图像数组然后在其上进行循环操作,预载入每个图像,然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕,根据事件处理器的程序逻辑,它就可以将浏览器带入下一个页面(或者执行其它任务)。
预载入和多状态菜单
现在,如何在实际应用程序中使用所有你学到的理论?下面的这段代码是我最近偶尔编写的一个菜单栏,这个菜单栏由一些按钮(图像链接)组成,每个按钮具有三种状态:正常、悬停和点击。因为按钮具有多种状态,所以很有必要使用图像预载入,以保证菜单的状态能够快速地反应。清单A中的代码说明了实现方法。
清单A 中的HTML 代码设置了一个由四个按钮组成的菜单,每个按钮具有三种状态:正常、悬停和点击。需求如下:
# 当鼠标移动到一个正常状态下的按钮之上时,它变为悬停状态。在鼠标离开之后,按钮恢复为正常状态。
# 在鼠标点击一个按钮时,按钮变为点击状态。在其它按钮被点击之前,它将保留这一状态。
# 如果一个按钮被点击,其它按钮的状态都不能为点击状态。其它按钮只能为悬停状态或正常状态。
# 在同一时间只能有一个按钮被点击。
# 在同一时间只能有一个按钮处于悬停状态。
第一个任务是设置数组,用于保存菜单每个状态的图像。与这些数组元素对应的 <img> 也在 HTML 文档正文(body)中创建,并顺序地命名。请注意,数组值的索引是从0开始的,虽然对应的 <img> 元素的命名是从1开始的——这样就需要在脚本后面的部分进行计算调整。
函数 preloadImage() 负责将所有的图像存储到缓存中,以使鼠标运动的响应时间最小。for() 循环用于迭代第一步创建的图像,并在每次迭代中预载入一个图像。
Javascript 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 #Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 #Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 #Javascript
JavaScript 原型继承之构造函数继承
Aug 26 #Javascript
JavaScript原型继承之基础机制分析
Aug 26 #Javascript
自己动手开发jQuery插件教程
Aug 25 #Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 #Javascript
You might like
SSI指令
2006/11/25 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
javascript 短路法代码精简
2009/08/20 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
python中id函数运行方式
2020/07/03 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python 实现Harris角点检测算法
2020/12/11 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
生产主管岗位职责
2013/11/10 职场文书
班主任个人工作反思
2014/04/28 职场文书
仲裁协议书
2014/09/26 职场文书
实习单位证明范例
2014/11/17 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
阿里云日志过滤器配置日志服务
2022/04/09 Servers
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB