网页图片预加载技术

提示：本文写于 2013 年，文中记录的是当时通过 JavaScript 实现图片预加载的方式。现代浏览器的资源加载与缓存机制已有较大变化，请结合文章发布时间阅读。

说完了图片的延时加载，再来说一下图片的预加载。

我们经常可以看到浏览器在加载一张比较大的图片时，图片会从上到下逐渐显示出来。这样一来，一是对用户体验不太好，二是在图片下载完成之前，我们往往无法准确知道图片最终的显示情况，也不利于控制网页界面。

那么，有没有一种方法，能让图片在真正显示之前就提前加载完成，然后整体展示到网页上呢？

答案是有的，那就是图片预加载技术。

来看下面一个简单的例子：

function preloadimg(url, callback){
    varImg=newImage();

    Img.onload =callback;
    Img.src =url;
}

window.onload =function(){
    preloadimg(
    "http://localhost/example.jpg",
    function(){
        document.getElementsByTagName("img")[0].src = "http://localhost/example.jpg";
        }
    );
}

看完前面图片的延时加载，再来看图片预加载，其实基本原理就比较容易理解了。

首先，通过 JavaScript 创建一个新的图片对象：

varImg=newImage();

然后把需要预加载的图片地址赋值给 Img.src =url; 这时候，浏览器就会开始请求这张图片。

当图片加载完成之后：Img.onload =callback;

会执行对应的回调函数。等到需要显示图片时，再把图片插入到 HTML 中。

简单来说，整个过程就是：

先通过 JavaScript 在后台加载图片，等图片下载完成后，再显示给用户。

这样，图片可以在用户不知晓的情况下提前完成下载。等真正需要展示时，浏览器可以直接使用已经加载完成的图片资源，用户就不需要再面对漫长的图片加载过程。

对于提高网站的用户体验来说，这种方式还是比较有用的。

预加载多张图片

如果需要一次预加载的图片比较多，preloadimg 函数的第一个参数也可以换成一个数组，然后在函数内部遍历这个数组，就可以一次加载多张图片。

例如：

var imgs= [
    "1.jpg",
    "2.jpg",
    "3.jpg"
];

然后依次创建图片对象进行加载。

图片预加载技术在一些图片分享网站、图片新闻网站等场景中比较常见。

预加载也不能一次加载太多

另外还要注意一点。

实际上，当用户第一次进入网站时，如果一次性预加载过多图片，同样会对网站的加载速度产生比较大的影响。

所以，预加载也不是图片越多越好，而是应该根据实际的用户行为来决定加载什么。

例如在一个图片新闻网站中，用户一次查看一张图片。

当用户正在查看当前图片时，我们可以提前把下一张图片加载好；等用户点击查看下一张时，图片可能已经提前下载完成了。

然后再继续预加载下一张，以此类推。

这样既可以提高用户体验，也不会在用户刚进入网站时一次性占用过多的服务器和带宽资源。

图片延时加载，是暂时不需要就不加载；图片预加载，则是在即将需要之前提前加载。

两种方式虽然方向不同，但目的其实都是一样的：让资源在合适的时间加载。