位置：首页>> 网络编程>> JavaScript>> javascript图片预加载

javascript图片预加载

作者：heroguang　来源：heroguang的日志　发布时间：2009-08-30 12:47:00　

标签：JavaScript,预加载,图片

网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像pconline一样每个页面只显示一张图片，让用户每看一张图片就需要重新下载一下整个页面。不过，在web2.0时代，更多人愿意用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图片。

知道了一张图片的地址，需要把它在一个固定大小的html容器(可以是div等)里边显示出来，最重要的当然是需要知道这张即将显示的图片的宽和高，然后再结合容器的宽和高，按照一定的缩放比例使图片显示出来。因此，实现图片预加载就成为图片浏览器的核心功能了。

做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的Image对象。一般的手段无非这样：

　function preLoadImg(url) {
　　 var img = new Image();
　　 img.src = url;
　　}

通过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。实际上，这里用到的预下载功能也和这基本一致。图片预下载下来后，通过 img的width和height属性，就能知道图片的宽和高了。但是需要考虑到，在做图片浏览器功能时，图片都是实时显示的。比如你点了显示的按钮，这个时候才会调用上边类似的代码来加载图片。因此，如果你直接用img.width的时候，图片还没有完全下载下来。因此，需要用一些异步的方法，等到图片下载完毕的时候才会再对img的width和height进行调用。

实现这样的异步方法实际上不难，图片的下载完毕事件也很简单，就是简单的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);
　　}
　　<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

在firefox中测试一下，发现不错，果然和预想的效果一样，在图片下载后，就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。

2 下一页

投稿

javascript图片预加载

猜你喜欢