预载入和JavaScript Image()对象.doc

预载入和JavaScript Image()对象?? 2010-04-13 12:37:04|??分类： 默认分类 |字号?订阅 很多high-res图像真的可以使 Web 站点更加整洁。但是它们也会使站点的访问速度变慢——图像是文件，文件使用带宽，带宽直接与等待时间相关。是该了解如何通过一个叫做图像预载入 （preloading）的技巧来提高 Web 站点的访问速度的时候了。 图像预载入 对于浏览器载入图像 来说，只有在对图像发送一个 HTTP请求之后，它们才会被浏览器载入，对图像的 HTTP 请求要么使用 ＜img＞ 标记，要么通过方法调用实现。如果使用 JavaScript 脚本来处理在 mouseover 事件时交换图像，或者在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果。 一些浏览器采用一些 措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是 在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。 Image() 对象 预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。假设我们有一个图像叫做/htmldata/2006-06-26 /heavyimagefile.jpg，在用户的鼠标放到一个已经显示的图像之上时，我们希望显示这个图像。为了预载入这一图像从而得到较快的响应时 间，我们简单地创建一个 Image() 对象 heavyImage，然后在 onLoad() 事件处理器中将其同时载入。 html head script language = JavaScript function preloader() { heavyImage = new Image(); heavyImage.src = /htmldata/2006-06-26/heavyimagefile.jpg; } /script /head body onLoad=javascript:preloader() a href=# onMouseOver=javascript:document.img01.src=/htmldata/2006-06-26/heavyimagefile.jpg img name=img01 src=/htmldata/2006-06-26/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() 处理器，它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来，以在图像完全载入之后执行一些特定的任务。下面的例子说明了这