js 图片预加载

// 图片预加载的示例代码

function preloadImages(urls, callback) {
    let loadedImages = 0;
    let images = {};

    // 遍历图片 URL 数组，创建新的 Image 对象并监听其加载完成事件
    urls.forEach(function (src) {
        images[src] = new Image();
        images[src].onload = function () {
            // 每当一张图片加载完成，计数器加一
            loadedImages++;
            // 如果所有图片都已加载完成，则调用回调函数
            if (loadedImages === urls.length) {
                callback(images);
            }
        };
        images[src].src = src; // 设置图片的 src 属性以开始加载
    });
}

// 使用示例
const imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
];

preloadImages(imageUrls, function (images) {
    console.log('所有图片已加载完成:', images);
    // 在这里可以使用已经加载好的图片对象
});

解释说明：

1. preloadImages 函数：接收两个参数，一个是图片的 URL 数组 urls，另一个是当所有图片加载完成后要执行的回调函数 callback。
2. Image 对象：为每个 URL 创建一个新的 Image 对象，并设置其 src 属性以开始加载图片。
3. onload 事件：每当一张图片加载完成时，会触发 onload 事件，此时计数器 loadedImages 加一。当所有图片都加载完成后，调用传入的回调函数 callback，并将加载好的图片对象作为参数传递给回调函数。
4. 回调函数：在所有图片加载完成后，可以在回调函数中处理这些图片对象，例如将它们插入到页面中或进行其他操作。

这样可以确保在需要使用图片之前，它们已经被加载到浏览器中，从而提高用户体验。