预渲染图像

Question

我有一个名为#highlights的div，它交换文章标题和插图。当我使用jQuery切换到新的插图时，如下所示

$("#highlights").css("background","url("+path+")");

第一次设置的背景图片显示得很慢。我该怎么解决这个问题呢？

Answer 1

你可能想要preload the images (由James提供)：

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'
]);