预载入和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 Image()对象的更多相关文章

  1. 预载入和javascript对象

    请参见 http://www.west263.com/info/html/wangyezhizuo/Javascript/20080225/34168.html

  2. javascript Error对象详解

    今天谈一下在IE浏览器下返回执行错误的Javascript代码所在的问题.其中在IE浏览器下,如果你使用了try-catch,那么当出现异常的时候,IE浏览器会传递一个Error对象. ~~~怎么通过 ...

  3. JavaScript判断对象的类型

    JavaScript判断对象的类型 最近阅读了一些关于JavaScript判断对象类型的文章.总结下来,主要有constructor属性.typeof操作符.instanceof操作符和Object. ...

  4. javascript 函数对象

    http://hi.baidu.com/gdancer/blog/item/a59e2c12479b4e54f919b814.html jQuery的一些写法就是基于这篇文章的原理的..     函数 ...

  5. javascript 全局对象--w3school

    JavaScript全局对象 1.  decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...

  6. JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString

    JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...

  7. 从零构建JavaScript的对象系统

    一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...

  8. 关于javascript自定义对象(来自网络)(最近几天不会的)

    javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...

  9. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

随机推荐

  1. 【转】Visual Studio 2010在数据库生成随机测数据

    测试在项目中是很重要的一个环节,在Visual Studio 2010中,在测试方面已经有很好的支持了,比如有单元测试,负载测试等等.在数据测试的方面,Visual Studio 2010,还支持对数 ...

  2. 层层递进Struts1（六）自定义转换器

    Struts提供的类型转换有限,如果我们强行使用没有的类型转换,则会出现错误,以Date类型为例: org.apache.catalina.core.StandardWrapperValve invo ...

  3. HDU 1556 Color the ball - from lanshui_Yang

    Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的“小飞鸽"牌电动车从气球a ...

  4. CI框架微信开发-自定义菜单

    在CI框架下面实现了自定义菜单功能.写了一个model,一个类库.顺便附带access_token的实现方式 <?php class Makemenu{ public $menustr; pub ...

  5. php静态属性和静态方法

    php静态属性和静态方法 2012-09-29 10:18 1518人阅读 评论(0) 收藏 举报 phpfunction 本php教程主要是学习php中静态属性和静态方法的使用方法和基本的示例. · ...

  6. Python使用xslt提取网页数据

    1,引言 在Python网络爬虫内容提取器一文我们详细讲解了核心部件:可插拔的内容提取器类gsExtractor.本文记录了确定gsExtractor的技术路线过程中所做的编程实验.这是第一部分,实验 ...

  7. python 在linux下通过top,和dh命令获得cpu,内存，以及硬盘信息

    主要是通过os.popen读取命令输出实现的,os.popen启动新的进程,且将外部命令的输出作为文件类型对象返回.不能获得外部命令的返回值.既然是文件对象就可以直接用for in 来读取,代码如下: ...

  8. Python学习(三) 输出任意格式的字符串以及字符串的切片

    在Python中想要输出一句话,如下 a='hello world' print a //打印出的是hello world print 'hello \n world' //打印出的是 //hello ...

  9. java的GUI编程

    目前有三种创建模版产生应用窗体: 第一种: public class MenuDemo implements ActionListener{ //你的组件(成员变量) public MenuDemo( ...

  10. mysqlbackup

    mysqlbackup 使用学习 1.设置数据库用户的相关权限 '; grant reload,replication client,super,process on *.* to backupuse ...