JavaScript 预加载图像
Harshit Jindal
2021年7月3日
本教程教授如何使用 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);
Author: Harshit Jindal
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn