迹忆客 专注技术分享

本教程教授如何使用 JavaScript 预加载图像。

在谈如何预加载图片之前，我们先来了解一下为什么需要预加载图片。当我们在 HTML 中使用 <image> 标签定义图像时，浏览器会看到该图像，下载它，并在页面加载之前为我们缓存它。它使显示图像变得相当简单。但是当我们有一些由 JavaScript 代码触发的图像动态加载时，浏览器没有关于它的先验信息。因此，此类图像无法下载和缓存。这些图像将被即时加载，并且会在图像首先下载时导致显示延迟。它使网站看起来很糟糕，因此必须预加载这些图像。

例如：如果我们要显示滚动效果，即更改鼠标在其上滚动时显示的图像，我们必须确保第二张图像已预加载；否则，图像将花费大量时间加载，这会使网站看起来丑陋且反应迟钝。

使用 JavaScript 预加载图像

程序

• 启动一个变量 preloaded 来存储在预加载阶段加载的图像数量和一个图像数组 images 来存储所有要预加载的图像的地址。

• 我们定义了一个函数 preLoader() 来为所有必须预加载的图像创建图像对象，并将 src 属性存储在数组 images 的对象上。我们还附加了一个函数 progress() 来维护成功预加载的图像数量，并在所有图像预加载后执行任何操作。

• 我们向窗口添加一个事件侦听器，在加载 DOM 内容时调用我们的 preLoader()。

代码

var preloaded = 0;
var images = new Array("img1.jpg", "img2.jpg", "img3.jpg");
 
function preLoader(e) {
    for (var i = 0; i < images.length; i++) {
        var tempImage = new Image();
         
        tempImage.addEventListener("load", progress, true);
        tempImage.src = imageArray[i];
    }
}
 
function progress() {
    preloaded++;
     
    if (preloaded == imageArray.length) {
        //ALL Images have been loaded, perform the desired action
    }
}
this.addEventListener("DOMContentLoaded", preLoader, true);