JS图片预加载 JS实现图片预加载应用

在JavaScript中，图片预加载是一种常用的技术，用于在将图片显示给用户之前，先将其加载到浏览器中。这样做的好处是可以减少图片加载时的延迟，提升用户体验。以下是一个简单的JavaScript图片预加载实现示例：

function preloadImages(arrayOfImages) {
    // 创建一个新的Image对象数组
    let images = [];
    let loadedImages = 0;

    // 遍历图片URL数组
    for (let i = 0; i < arrayOfImages.length; i++) {
        let img = new Image();
        // 图片加载成功时触发
        img.onload = function() {
            loadedImages++;
            console.log(`${loadedImages} images loaded`);
            if (loadedImages === arrayOfImages.length) {
                // 所有图片加载完成后的回调函数（如果需要的话）
                console.log('All images have been loaded!');
                // 这里可以调用一个函数来处理加载完成的图片，例如显示它们
            }
        };
        // 图片加载失败时触发
        img.onerror = function() {
            console.error(`Failed to load image: ${arrayOfImages[i]}`);
        };
        // 设置图片的src，开始加载
        img.src = arrayOfImages[i];
        // 将Image对象添加到数组中，以便后续使用（如果需要的话）
        images.push(img);
    }

    // 返回Image对象数组（如果需要的话）
    return images;
}

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

preloadImages(imageURLs);

在这个示例中，`preloadImages`函数接受一个包含图片URL的数组作为参数。函数内部，它遍历这个数组，为每个URL创建一个新的`Image`对象，并监听这些对象的`load`和`error`事件。当所有图片都加载完成后（即`loadedImages`变量的值等于图片URL数组的长度时），可以执行一些后续操作，比如显示这些图片。

请注意，由于网络延迟和图片大小的不同，图片可能不会同时加载完成。因此，我们通过在`load`事件中更新`loadedImages`计数器来跟踪已加载的图片数量，并在所有图片加载完成后执行相应的操作。