预载入和JavaScriptImage对象

预载入和JavaScriptImage()对象2010-04-1312:37:04|分类：默认分类|字号订阅很多high-res图像真的可以使Web站点更加整洁。但是它们也会使站点的访问速度变慢——图像是文件，文件使用带宽，带宽直接与等待时间相关。是该了解如何通过一个叫做图像预载入（preloading）的技巧来提高Web站点的访问速度的时候了。图像预载入对于浏览器载入图像来说，只有在对图像发送一个HTTP请求之后，它们才会被浏览器载入，对图像的HTTP请求要么使用＜img＞标记，要么通过方法调用实现。如果使用JavaScript脚本来处理在mouseover事件时交换图像，或者在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的Internet连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果。一些浏览器采用一些措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。Image()对象预载入图像最简单的方法是在JavaScript中实例化一个新Image()对象，然后将需要载入的图像的URL作为参数传入。假设我们有一个图像叫做，在用户的鼠标放到一个已经显示的图像之上时，我们希望显示这个图像。为了预载入这一图像从而得到较快的响应时间，我们简单地创建一个Image()对象heavyImage，然后在onLoad()事件处理器中将其同时载入。htmlheadscriptlanguage=JavaScriptfunctionpreloader(){heavyImage=newImage();heavyImage.src=}/script/headbodyonLoad=javascript:preloader()ahref=#onMouseOver=javascript:document.img01.src='=img01src=请注意，图像标记本身不能处理onMouseOver()和onMouseOut()事件，这就是上例中img标记被包含在一个a标记之中的原因，a标记支持这两个事件类型。使用数组载入多个图像在实际应用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包含多个图像翻卷的菜单栏中，或者在我们试图创建平滑效果时，都需要预载入多个图像。其实这并不困难，只要使用JavaScript的数组即可实现，如下例所示：scriptlanguage=JavaScriptfunctionpreloader(){//countervari=0;//createobjectimageObj=newImage();//setimagelistimages=newArray();images[0]=image1.jpgimages[1]=image2.jpgimages[2]=image3.jpgimages[3]=image4.jpg//startpreloadingfor(i=0;i=3;i++){imageObj.src=images[i];}}/script在上面的例子中，我们定义一个变量i和一个Image()对象imageObj。然后定义了一个新数组images[]，每个数组元素存储要被预载入的图像。最后，创建一个for()循环来处理整个数组，并将每个元素赋给Image()对象，这样将其载入到缓存中。onLoad()事件处理器像很多JavaScript的其它对象一样，Image()对象也有一些事件处理器。其中最有用的一个肯定是onLoad()处理器，它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来，以在图像完全载入之后执行一些特定的任务。下面的例子说明了这一点，在这个例子中，首先在图像载入时显示一个“pleasewait”屏幕，然后在载入完成时将浏览器转到一个新的URL。htmlheadscriptlanguage=JavaScript//createanimageobjectobjImage=newImage();//setwhathappensoncetheimagehasloadedobjImage.onLoad=imagesLoaded();//preloadtheimagefileobjImage.src='(){document.location.href='index2.html';}/script/headbodyPleasewait,loadingimages.../body/html当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。预载入和多状态菜单现在，如何在实际应用程序中使用所有你学到的理论？下面的这段代码是我最近偶尔编写的一个菜单栏，这个菜单栏由一些按钮（图像链接）组成，每个按钮具有三种状态：正常、悬停和点击。因为按钮具有多种状态，所以很有必要使用图像预载入，以保证菜单的状态能够快速地反应。清单A中的代码说明了实现方法。清单A中的HTML代码设置了一个由四个按钮组成的菜单，每个按钮具有三种状态：正常、悬停和点击。需求如下：#当鼠标移动到一个正常状态下的按钮之上时，它变为悬停状态。在鼠标离开之后，按钮恢复为正常状态。#在鼠标点击一个按钮时，按钮变为点击状态。在其它按钮被点击之前，它将保留这一状态。#如果一个按钮被点击，其它按钮的状态都不能为点击状态。其它按钮只能为悬停状态或正常状态。#在同一时间只能有一个按钮被点击。#在同一时间只能有一个按钮处于悬停状态。第一个任务是设置数组，用于保存菜单每个状态的图像。与这些数组元素对应的＜img＞也在HTML文档正文（body）中创建，并顺序地命名。请注意，数组值的索引是从0开始的，虽然对应的＜img＞元素的命名是从1开始的——这样就需要在脚本后面的部分进行计算调整。函数preloadImage()负责将所有的图像存储到缓存中，以使鼠标运动的响应时间最小。for()循环用于迭代第一步创建的图像，并在每次迭代中预载入一个图像。函数resetAll()提供了一种快捷的方式来将所有图像重置为它们的正常状态。这是必要的，因为在一个项被点击时，被点击的项变为点击状态之前，菜单中的所有其它项都必须置为正常状态。函数setNormal()、setHover()和setClick()用于将特定图像（将图像编号以一个参数传给每个函数）的状态相应地改变为正常、悬停和点击。因为被点击的图像在其它对象被点击之前必须保留它的状态（参见第二个规则），所以它们临时不响应鼠标移动；这样，setNormal()和setHover()函数的代码就只会改变目前不是处于点击状态的按钮的状态。前面介绍的只是很多预载入图像的一种方法，这种方法可以帮助你提高JavaScript效果的响应速度。你可以自由地在你的站点中使用前面给出的方法，如果有必要，你可以根据自己的需要修改上面的代码。祝你好运！avascriptimage对象[]文档对象Image是图片对象，而document.images[]是一个数组，包含了文档中所有的图片（img）。要引用单个图片，可以用document.images[x]。如果某图片imgname=...包含“name”属性，可以使用“document.images['name']”这种方法来引用图片。在IE中，如果某图片imgid=...包含ID属性，可以直接使用“imageID”来引用图片。单个Image对象的属性name;src;lowsrc;width;height;vspace;hspace;border这些属性跟img标记里的同名属性是一样的。在Netscape里，只有src属性可以改，通过对src属性赋值，可以实时的更改图片。可以定义Image：varmyImage=newImage();或varmyImage=newImage(图片地址字符串);通常我们用javascript的imagePreload来预读图片一般这种对象只有一个用：预读图片(preload)。因为当对对象的src属性赋值的时候，整个文档的读取、JavaScript的运行都暂停，让浏览器专心的读取图片。预读图片以后，浏览器的缓存里就有了图片的Copy，到真正要把图片放到文档中的时候，图片就可以立刻显示了。现在的网页中经常会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们都是先预读图像的。预读少量图片的JavaScript例子：varimagePreload=newImage();imagePreload.src='001.gif';imagePreload.src='002.gif';imagePreload.src='003.gif';大量图片预读则用下面的方式：functionimagePreload(){varimgPreload=newImage();for(i=0;iarguments.length;i++){imgPreload.src=arguments[i];}}imagePreload('001.gif','002.gif','003.gif','004.gif','005.gif');======================================================================在I’mDonkey看到倔倔死磕Javascript之放大镜写的不错，思路很清晰。另外的收获是发现了js的Image对象，他是这么用的：functiongetImageSize(imageEl){vari=newImage();i.src=imageEl.src;returnnewArray(i.width,i.height);}他利用这个函数取得imageEl的width和height。真的很新奇，以前居然不知道js还有Image对象，前几天曾见过ECMAScript5在Gecko1.9.1添加的nativeJSON对象看来真是生有涯，而学无涯啊。Image对象在JavaScript1.1(i.e.sinceNetscapeNavigator3.0)引入，我们通过浏览器看到的图像都是通过一个数组显示出来的，这个数组成为images,他是document对象的一个属性。网页中的图像均会被自动看作图像对象，并依顺序，分别表示为document.images[