1、预载入和 JavaScript Image()对象 2010-04-13 12:37:04| 分类： 默认分类 |字号 订阅 很多 high-res图像真的可以使 Web 站点更加整洁。但是它们也会使站点的访问速度变慢图像是文件，文件使用带宽，带宽直接与等待时间相关。是该了解如何通过一个叫做图像预载入 （preloading）的技巧来提高 Web 站点的访问速度的时候了。图像预载入对于浏览器载入图像 来说，只有在对图像发送一个 HTTP 请求之后，它们才会被浏览器载入，对图像的 HTTP 请求要么使用 img 标记，要么通过方法调用实现。如果使用 JavaScript 脚本来处理在 mouse
2、over 事件时交换图像，或者在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果。一些浏览器采用一些 措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是 在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。Image() 对象预载入图像最简单的方法是在 Jav
3、aScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。假设我们有一个图像叫做http:/ /heavyimagefile.jpg，在用户的鼠标放到一个已经显示的图像之上时，我们希望显示这个图像。为了预载入这一图像从而得到较快的响应时 间，我们简单地创建一个 Image() 对象 heavyImage，然后在 onLoad() 事件处理器中将其同时载入。function preloader()heavyImage = new Image();heavyImage.src = “http:/ 注意，图像标记本身不能处理 onMouseOver() 和
4、onMouseOut() 事件，这就是上例中 标记被包含在一个 标记之中的原因， 标记支持这两个事件类型。使用数组载入多个图像在 实际应用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包含多个图像翻卷的菜单栏中，或者在我们试图创建平滑效果时，都需要预载入多个图像。 其实这并不困难，只要使用 JavaScript 的数组即可实现，如下例所示：function preloader()/ countervar i = 0;/ create objectimageObj = new Image();/ set image listimages = new Array();images0=“i
5、mage1.jpg“images1=“image2.jpg“images2=“image3.jpg“images3=“image4.jpg“/ start preloadingfor(i=0; i在 上面的例子中，我们定义一个变量 i 和一个 Image() 对象 imageObj。然后定义了一个新数组 images，每个数组元素存储要被预载入的图像。最后，创建一个 for() 循环来处理整个数组，并将每个元素赋给 Image() 对象，这样将其载入到缓存中。onLoad() 事件处理器像很多 JavaScript 的其它对象一样，Image() 对象也有一些事件处理器。其中最有用的一个肯定是
6、 onLoad() 处理器，它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来，以在图像完全载入之后执行一些特定的任务。下面的例子说明了这一点，在 这个例子中，首先在图像载入时显示一个“please wait”屏幕，然后在载入完成时将浏览器转到一个新的 URL。/ create an image objectobjImage = new Image(); / set what happens once the image has loaded objImage.onLoad=imagesLoaded(); / preload the image fileobjImage.sr
7、c=http:/ function invoked on image loadfunction imagesLoaded()document.location.href=index2.html;Please wait, loading images.当然，你还可 以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它 就可以将浏览器带入下一个页面（或者执行其它任务）。预载入和多状态菜单现在，如何在实际应用程序中使用 所有你学到的理论？下面的这段代码是我最近偶尔编写的一个菜单栏，这个菜单栏由一些按钮（图像链
8、接）组成，每个按钮具有三种状态：正常、悬停和点击。因为 按钮具有多种状态，所以很有必要使用图像预载入，以保证菜单的状态能够快速地反应。清单 A中的代码说明了实现方法。清单 A 中的 HTML 代码设置了一个由四个按钮组成的菜单，每个按钮具有三种状态：正常、悬停和点击。需求如下：# 当鼠标移动到一个正常状态下的按钮之上时，它变为悬停状态。在鼠标离开之后，按钮恢复为正常状态。# 在鼠标点击一个按钮时，按钮变为点击状态。在其它按钮被点击之前，它将保留这一状态。# 如果一个按钮被点击，其它按钮的状态都不能为点击状态。其它按钮只能为悬停状态或正常状态。# 在同一时间只能有一个按钮被点击。# 在同一时间只
9、能有一个按钮处于悬停状态。第一个任务是设置数组，用于保存菜单每个状态的图像。与这些数组元素对应的 img 也在 HTML 文档正文（body）中创建，并顺序地命名。请注意，数组值的索引是从 0开始的，虽然对应的 img 元素的命名是从 1开始的这样就需要在脚本后面的部分进行计算调整。函数 preloadImage() 负责将所有的图像存储到缓存中，以使鼠标运动的响应时间最小。for() 循环用于迭代第一步创建的图像，并在每次迭代中预载入一个图像。函 数 resetAll() 提供了一种快捷的方式来将所有图像重置为它们的正常状态。这是必要的，因为在一个项被点击时，被点击的项变为点击状态之前，菜单
10、中的所有其它项都必须置为 正常状态。函数 setNormal()、setHover() 和 setClick() 用于将特定图像（将图像编号以一个参数传给每个函数）的状态相应地改变为正常、悬停和点击。因为被点击的图像在其它对象被点击之前必须保留它的状态（参见 第二个规则），所以它们临时不响应鼠标移动；这样，setNormal() 和 setHover() 函数的代码就只会改变目前不是处于点击状态的按钮的状态。前面介绍的只是很多预载入图像的一种方法，这种方法可以帮助你提高 JavaScript 效果的响应速度。你可以自由地在你的站点中使用前面给出的方法，如果有必要，你可以根据自己的需要修改上面的
11、代码。祝你好运！avascript image 对象http:/ images文档对象Image是图片对象，而 document.images 是一个数组，包含了文档中所有的图片（）。要 引用单个图片，可以用 document.imagesx。如果某图片包含“name”属性，可以使用“document.imagesname”这种方法来引用图片。在 IE 中，如果某图片包含 ID属性，可以直接使用“imageID”来引用图片。单个 Image 对象的属性name; src; lowsrc; width; height; vspace; hspace; border 这些属性跟标记里的同名属性是一
12、样的。在 Netscape 里，只有 src属性可以改，通过对 src 属性赋值，可以实时的更改图片。可以定义 Image ：var myImage = new Image(); 或 var myImage = new Image();通常我们用 javascript的 imagePreload 来预读图片一 般这种对象只有一个用：预读图片(preload)。因为当对对象的 src 属性赋值的时候，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片。预读图片以后，浏览器的缓存里就有了图片的 Copy，到真正要把图片放到文档中的时候，图片就可以立刻显示了。现在的网页中经常
13、会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们 都是先预读图像的。预读少量图片的 JavaScript 例子：var imagePreload = new Image();imagePreload.src = 001.gif;imagePreload.src = 002.gif;imagePreload.src = 003.gif;大量图片预读则用下面的方式：function imagePreload() var imgPreload = new Image();for (i = 0; i 这样我们就可以通过 document.myImage 或者 document.imag
14、e“myImage来访这个对象。image 对象现在一般常用来预加载一些图片，先将其装入 DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。JavaScript 里的 Image 对象可以很好的实现这一需求，在 FF 下通过 alert(img 对象) 可以看到“object HTMLImageElement“内容，Image 对象可以直接利用 append 添加到 body 里面去，调用十分方便。图像对象：建立图像对象：格式：图像对象名称=new Image(宽度,高度)图像对象的属性：border complete height hspace lowsrc name src
15、vspace width图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。参考代码：var img=new Image();img.onload=function()alert(“img is loaded“);img.onerror=function()alert(“error!“);img.src=“http:/ show()alert(“body is loaded“);window.onload=show;运行上面的代码后，在不同的
16、浏览器中进行测试，发现 IE 和 FF 是有区别的，在 FF 中，img 对象的加载包含在 body 的加载过程中，既是 img 加载完之后，body 才算是加载完毕，触发 window.onload 事件。在 IE 中，img 对象的加载是不包含在 body 的加载过程之中的，body 加载完毕，window.onload 事件触发时，img 对象可能还未加载结束，img.onload 事件会在 window.onload 之后触发。根据上面的问题，考虑到浏览器的兼容性和网页的加载时间，尽量不要在 Image 对象里放置过多的图片，否则在 FF 下会影响网页的下载速度。当然如果你在 wind
17、ow.onload 之后，执行预加载函数，就不会有 FF 中的问题了。例子见 javascript dom 中的 Image对象图像预加载js 实现图片预加载 （js 操作 Image 对象属性 complete ，事件 onload 异步加载图片）通过 js 操纵 DOM 很多情况下都是为了实现和当前页 html 元素的异步载入，我谈谈对Image 对象的一些认识。看个例子：当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发 onload 事件显示到页面上。如果你是第一次加载 “tt.jpg“ 这张图片的话，运行正常。点击按钮加载并显示一张图片，如
18、果重复点击会怎么样呢？IE、Opera 中，除了第一次加载 图片时候显示正常，之后再点击就没有反应了，刷新也一样。难道它们只触发一次 ”onload“ 事件？是缓存机制？FF、Chrom 中，每点击一次加载一张该图片。稍微修改下：运行后发现，奇怪的事情发生了。所有的浏览器都一致了，都是每点击一次加载一张图片。这又是什么原因？由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件！联想一下 Image 对象的一些属性看看， complete、readyState(IE 专属值uninitialized,complete) （为防止缓存影响效果请更换图片名称！）经 过以上测试
19、，可以看出一些不同点，对于 complete 属性来讲，IE 是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，否则一直是 false ，和以前是否加载过该张图片没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和 IE 的 readyState 属性的表现一致！至此，可以肯定的是所有的浏览器都会缓存图片！可是上面的问题到底是什么原因导致的呢？众所周知，从缓存里加载东西的速度是很快的，那么在.Img.src = isrc;Img.onload = .的过程中，
20、难道 IE、Opera 加载的速度快到，来不及追加事件？这回加载一张根本不存在的图片看看效果：可 以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲，IE、Opera 表现正常，complete 始终为 false ；IE 的 readyState 始终为 uninitialized 。令人疑惑的是 FF，其中 Iplete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的时候 Iplete 值为 false。而之后 Iplete 值就一直为 true 了！如果换一张从来没有加载过的图片，FF 和 Chrom 的行
21、为就一致了，都是一开始加载时， Iplete 值为 false， 之后为 true！测试的过程中还发现，脚本的执行顺序的确会影响到类似于 onload 等事件的追加，如果在其显示后在追加事件就没有什么实际意义了！基于 javascript 这种解释性语言的特性，在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。JS实现图片预加载2012-03-07 10:05:31 我来说两句 收藏 我要投稿 网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像 pconline一样每个页面只显示一张图片，让用户每看 一张图片就需要重新下载一下整个页面。不过，在 web2
22、.0时代，更多人愿意用 javascript来实现一个图片浏览器，让用户无需等待过长的时间就能 看到其他图片。知道了一张图片的地址，需要把它在一个固定大小的 html容器（可以是div等）里边显示出来，最重要的当然是需要知道这张即将显示的图片的宽和高，然后再结合容器的宽和高，按照一定的缩放比例使图片显示出来。因此，实现图片预加载就成为图片浏览器的核心功能了。做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的 Image对象。一般的手段无非这样：function preLoadImg(url) var img
23、= new Image();img.src = url;通过调用 preLoadImg函数，传入图片的 url，就能使图片预先下载下来了。实际上，这里用到的预下载功能也和这基本一致。图片预下载下来 后，通过 img 的 width和 height属性，就能知道图片的宽和高了。但是需要考虑到，在做图片浏览器功能时，图片都是实时显示的。比如你点了显示的按钮，这 个时候才会调用上边类似的代码来加载图片。因此，如果你直接用 img.width的时候，图片还没有完全下载下来。因此，需要用一些异步的方法，等到图片 下载完毕的时候才会再对 img的 width和 height进行调用。实现这样的异步方法实际
24、上不难，图片的下载完毕事件也很简单，就是简单的 onload事件。因此，我们可以写出下面的代码：function loadImage(url, callback) var img = new Image();img.src = url;img.onload = function() /图片下载完毕时异步调用 callback函数。callback.call(img); / 将 callback函数 this指针切换为img。;好了，再来写一个测试用例。function imgLoaded()alert(this.width);在 firefox中测试一下，发现不错，果然和预想的效果一样，在图片
25、下载后，就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。不过，做到这一步，先别高兴太早还需要考虑一下浏览器的兼容性，于是，赶紧到 ie里边测试一下。没错，同样弹出了图片的宽度。但是，再点击 load的时候，情况就不一样了，什么反应都没有了。刷新一下，也同样如此。经过对多个浏览器版本的测试，发现 ie6、opera 都会这样，而 firefox和 safari则表现正常。其实，原因也挺简单的，就是因为浏览器 的缓存了。当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox 和 safari，它
26、们视图使这两种加载方式对用户透明，同样会引起图片的 onload事件，而 ie和 opera则忽略了这种同一性，不会引 起图片的 onload事件，因此上边的代码在它们里边不能得以实现效果。怎么办呢？最好的情况是 Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候，因为不需要等待，这个状态值就直接是表明已经下载了，而从 http请求加载时，因为需要等待下载，这个值显示为未完成。这样的话，就可以搞定了。经过一些分析，终于发现一个为各个浏览器所兼容的 Image的属性 complete。所以，在图片 onload事件之前先对这个值做一下判断即可。最后，代码变成如下的样子：func
27、tion loadImage(url, callback) var img = new Image(); /创建一个 Image对象，实现图片的预下载img.src = url;if (plete) / 如果图片已经存在于浏览器缓存，直接调用回调函数callback.call(img);return; / 直接返回，不用再处理 onload事件img.onload = function () /图片下载完毕时异步调用callback函数。callback.call(img);/将回调函数的 this替换为 Image对象;经过这么一番折腾，总算是让各个浏览器都能满足我们的目标了。虽然代码很简单
28、，但是却把图片浏览器中最核心的问题解决掉了，接下来你所要做的，仅仅是图片如何呈现的问题了js 图片延迟加载（兼容多浏览器)这一款网页特效图片延迟加载，兼容 ie6,7,8,firefox等，主要是通过网页特效 settimeout 来实现等网页加载完后再来加载图片哦。我在页面加载的时候加载一堆小缩略图， 这么多小的缩略图标签循环平铺下来，当单击小的图片时，动态加载大的图片显示，就类似于淘宝的商品查看图片。页面上有一个标签： 为了节省流量，加快页面载入速度，先不加载大图，当用户单击小图时，动态加载一张大图显示。 复制代码 代码如下:function switch_image(im) docume
29、nt.getelementbyid(big-image).src=im; 这种方式在 ie6,7外所有的浏览器工作都正常，比如 ie8,firefox, opera, chrome, safari。 就是 ie6,7这两个浏览器加载不了，单击小图的时候，有时候你能加载，有时候加载一半，有时候不能加载。 我以为问题出在 src这个东西上面，有可能 ie6,7修改 src不能正确加载图片，于是尝试把切换函数修改为： document.getelementbyid(pic-box).innerhtml=; ie6,7还是不行，于是想，有可能是图片被缓存了，那么加上随机数： document.gete
30、lementbyid(pic-box).innerhtml=; ie6,7依然不行。 于是在想，可能是 img用在 innerhtml里面出现的问题，所以，改成用 appendchild var img = document.createelement(img); img.src= im; document.getelementbyid(pic-box).appendchild(img); 还是不行。 再修改成用 new image 来：var img = new image(); img.src= im; document.getelementbyid(pic-box).appendchil
31、d(img); 还是不行。 百思不得其解，想，难道 ie6,7不能动态加载图片吗？难道是 img标签的问题？既然这样就换成背景图加载吧，于是 document.getelementbyid(pic-box).style.background=“url(“ + im + “)“; ie6,7依然不行，上面这么多方法除 ie6,7外其他都是正常的。 只有不停的 google，结果 google到了： ie6,7只有在用这样 动态加载图片是才会出现这种情况，google 到的一篇说明：有几个吃饱了没事儿干的老外反复试验发现这个问题是 ie6中一个底层机制的bug，之后的版本已经解决了。 据说或者这样
32、使用 a标签的话并不能阻止 a标签最后触发一个什么行为， 导致 ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被 aborted了。 当然这些吃饱了没事儿干的老外们也提出了各种匪夷所思复杂无比的解决方案。最简单的方法有两个，一个是这样使用 a标签，另外一个就是用 div替换 a标签来用。实际上我发现不仅是 ie6，ie7 也同样有这个 bug，还有，采用：并不能解决问题。看一个完整的 js图片延迟加载实例function chkdiv(divid) var chkid=document.getelementbyid(divid); if(chkid != n
33、ull)return true; else return false; if (chkdiv(demob) document.getelementbyid(demob).innerhtml= document.getelementbyid(demob_hidden).innerhtml;document.getelementbyid(demob_hidden).innerhtml=“;其中 id为 demob的 div是网页中间的原来放 js调用地方，下面的隐藏的 id为 demob_hidden的 div及后面的 js代码放在网页最后面，这 样在网页内容大部分加载完后再加载隐藏 div中的
34、js调用，然后再用后面的函数赋给 demob，这样能减少外部 js加载速度对网页整体加载的视觉影响了用 JS 实现延迟加载图片，提高网站加载速度 浏览： 1641 | 更新： 2012-03-05 10:39 4 1 举报 作者声明： 本篇经验系本人依照真实经历原创，未经许可，谢绝转载。步骤 1 2 3简介针对图片多的网站，用简单的 JS实现延迟加载图片，提高网站的加载速度。步骤/方法1. 优先加载顶部的图片。在之间加入下面这段 script；image=newImage(); image.src=“images/znew3/top_bg.jpg”;这里的图片地址是你要优先加载的图片，如顶部的图片，或者背景图片，根据自己的需要修改。2. 将要延迟加载的图片 src属性全部改成 thissrc;比如改成3. 在页面的最底部加入下面的 script代码，比如这样。setTimeout(“tosrc()”,5000); functiontosrc() imgs=document.getElementsByTagName(“img”); imgsnum=imgs.length; for(imgi=0;imgi 这也是一段示例代码，要根据自己的需要修改。参考资料http:/ ，建议您详细咨询相关领域专业人士。
