Question

我需要在悬停时更改背景图片，我正在通过Javascript在文档准备好的情况下预加载图像，现在，它在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'
]);

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

1 个答案: