图片预加载-优快云博客

本文介绍了一种名为懒加载的技术，该技术能够实现在浏览器可视区域外的图片延迟加载，直至用户将页面滚动到图片位置时才开始加载。这种方式有助于提高网页加载速度并节省服务器带宽。文中提供了一个具体的 JavaScript 实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[url]http://www.cnblogs.com/comdeng/archive/2008/06/15/Preload_Image.html[/url]


function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图片的预下载
    img.src = url;

    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
        callback.call(img);
        return; // 直接返回，不用再处理onload事件
    }

    img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};


function imgLoaded(){
  alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

[b]Lazy loader[/b]方式在一些图片非常多的网站中非常有用，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。
在腾讯的QQ空间和微博中就采用这样技术实现，在大访问量的网站，这样就相对可以减少服务器的压力，在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来，在下载过程中存在着用户等待内容呈现