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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
JS中min函数实例讲解
Feb 18 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
xml转json的js代码
2012/08/28 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python内置函数OCT详解
2016/11/09 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
报社实习生自荐信
2014/01/24 职场文书
工艺员岗位职责
2014/02/11 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2014年居委会工作总结
2014/12/09 职场文书