javascript - 如何在 Safari 和 Chrome 中使图像加载顺畅

Question

我需要在悬停时更改背景图像，我正在通过 Javascript 预加载图像以准备好文档，现在 thig 在 Firefox 中工作正常，但在 Chrome 和 Safari 中加载需要时间。那么有什么办法可以让它像 Firefox 一样流畅吗？此外，图像的大小近似于 Mbs。

这就是我在悬停时预加载和更改图像所做的

$( document ).ready(function() {
    // Set Default home page background
    if(defaultBGimage != "" && defaultBGimage != null && typeof(defaultBGimage) != "undefined"){
        $.backstretch(defaultBGimage, {centeredY: false});
    }
    // Pre-load images 
    function preloadImages(srcs) {
        if (!preloadImages.cache) {
            preloadImages.cache = [];
        }
        var img;
        for (var i = 0; i < srcs.length; i++) {
            img = new Image();
            img.src = srcs[i];
            preloadImages.cache.push(img);
        }
    }

    preloadImages(catBGimages); // Pass array of images to preload it 

    jQuery(".level1-cat").hover(function(){ // on hover change home page background image
        if(catBGimages[jQuery(this).data('id')] != null && catBGimages[jQuery(this).data('id')] != "null" && catBGimages[jQuery(this).data('id')] != "" && typeof(catBGimages[jQuery(this).data('id')]) != "undefined"){
            $.backstretch(catBGimages[jQuery(this).data('id')], {centeredY: false});
        }
    });
});

提前致谢。

Answer 1

以下是使预加载图像快速尝试的代码，这可能对您有所帮助..

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);