Question

是否可以在页面加载时异步加载图像？当用户点击按钮时，将显示代码中的图像，这意味着它们不会立即显示。然后我问是否可以将图像加载到某种缓存中，何时需要使用它们而不需要等待这么长时间？

Answer 1

浏览器异步加载所有图像对象。

这是一个图像加载器，它预加载所有图像，然后调用start（）方法。调用start（）时，所有图像都已完全加载并准备显示：

// image loader

// put the paths to your images in imageURLs[]
var imageURLs=[];  
imageURLs.push("myImage1.png");
imageURLs.push("myImage2.png");

// the loaded images will be placed in imgs[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}

异步图像加载jquery

1 个答案: