预载入和JavaScript Image()对象VIP免费

预载入和JavaScriptImage()对象2010-04-1312:37:04|分类：默认分类|字号订阅很多high-res图像真的可以使Web站点更加整洁。但是它们也会使站点的访问速度变慢——图像是文件，文件使用带宽，带宽直接与等待时间相关。是该了解如何通过一个叫做图像预载入（preloading）的技巧来提高Web站点的访问速度的时候了。图像预载入对于浏览器载入图像来说，只有在对图像发送一个HTTP请求之后，它们才会被浏览器载入，对图像的HTTP请求要么使用＜img＞标记，要么通过方法调用实现。如果使用JavaScript脚本来处理在mouseover事件时交换图像，或者在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的Internet连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果。一些浏览器采用一些措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。Image()对象预载入图像最简单的方法是在JavaScript中实例化一个新Image()对象，然后将需要载入的图像的URL作为参数传入。假设我们有一个图像叫做http://www.webjx.com/htmldata/2006-06-26/heavyimagefile.jpg，在用户的鼠标放到一个已经显示的图像之上时，我们希望显示这个图像。为了预载入这一图像从而得到较快的响应时间，我们简单地创建一个Image()对象heavyImage，然后在onLoad()事件处理器中将其同时载入。functionpreloader(){heavyImage=newImage();heavyImage.src="http://www.webjx.com/htmldata/2006-06-26/heavyimagefile.jpg";}请注意，图像标记本身不能处理onMouseOver()和onMouseOut()事件，这就是上例中标记被包含在一个标记之中的原因，标记支持这两个事件类型。使用数组载入多个图像在实际应用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包含多个图像翻卷的菜单栏中，或者在我们试图创建平滑效果时，都需要预载入多个图像。其实这并不困难，只要使用JavaScript的数组即可实现，如下例所示：functionpreloader(){//countervari=0;//createobjectimageObj=newImage();//setimagelistimages=newArray();images[0]="image1.jpg"images[1]="image2.jpg"images[2]="image3.jpg"images[3]="image4.jpg"//startpreloadingfor(i=0;i<=3;i++){imageObj.src=images[i];}}在上面的例子中，我们定义一个变量i和一个Image()对象imageObj。然后定义了一个新数组images[]，每个数组元素存储要被预载入的图像。最后，创建一个for()循环来处理整个数组，并将每个元素赋给Image()对象，这样将其载入到缓存中。onLoad()事件处理器像很多JavaScript的其它对象一样，Image()对象也有一些事件处理器。其中最有用的一个肯定是onLoad()处理器，它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来，以在图像完全载入之后执行一些特定的任务。下面的例子说明了这一点，在这个例子中，首先在图像载入时显示一个“pleasewait”屏幕，然后在载入完成时将浏览器转到一个新的URL。//createanimageobjectobjImage=newImage();//setwhathappensoncetheimagehasloadedobjImage.onLoad=imagesLoaded();//preloadtheimagefileobjImage.src='http://www.webjx.com/htmldata/2006-06-26/images/image1n.gif';//functioninvokedonimageloadfunctionimagesLoaded(){do...