JS实现图片预加载无需等待

在JavaScript中，实现图片预加载而不阻塞页面的一个常见方法是使用`Image`对象在后台加载图片。以下是一个简单的示例代码，展示了如何预加载多个图片而无需等待它们加载完成即可继续执行页面上的其他脚本：

function preloadImages(sources, callback) {
    let images = [];
    let loadedImages = 0;

    for (let src of sources) {
        let img = new Image();
        images.push(img);
        img.onload = function() {
            if (++loadedImages >= sources.length) {
                // 所有图片加载完成
                callback(images);
            }
        };
        img.onerror = function() {
            console.error(`Error loading image: ${src}`);
            if (++loadedImages >= sources.length) {
                // 即使有些图片加载失败，也调用callback
                callback(images);
            }
        };
        img.src = src; // 设置图片源，开始加载
    }

    // 如果没有图片源，则立即调用callback
    if (sources.length === 0) {
        callback([]);
    }
}

// 使用示例
const imageSources = [
    'image1.jpg',
    'image2.png',
    'image3.gif'
];

preloadImages(imageSources, function(images) {
    // 所有图片加载完成后的处理
    console.log('All images are loaded!');
    // 在这里，你可以使用images数组中的图片，例如设置到某个元素上
});

// 页面上的其他操作可以立即执行，不会被图片加载阻塞

在这个示例中，`preloadImages`函数接受一个图片源数组和一个回调函数。函数会为每个图片源创建一个`Image`对象，并设置其`onload`和`onerror`事件处理函数来跟踪加载进度。一旦所有图片都加载完成（或所有图片都尝试加载，包括那些失败的），就会调用回调函数，并将包含所有加载的图片对象的数组作为参数传递。

这样，页面的其他部分就可以在图片加载的同时继续执行，而不会因等待图片加载而阻塞。