预渲染图像 [重复]答案

【问题标题】：Pre-render images [duplicate]预渲染图像 [重复]
【发布时间】：2014-01-04 01:47:21
【问题描述】：

我有一个名为 #highlights 的 div，它可以交换文章标题和插图。当我像这样使用 jQuery 更改为新插图时

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

正在设置的背景图片第一次缓慢显示。我该如何解决这个问题？

【问题讨论】：

您可以通过先将图像加载到图像对象中来将图像放入缓存中。
你研究过 Sprites 的使用吗？
预渲染与预加载完全不同。我自己正在寻找一种非 hacky 的方式来预渲染 我已经预加载 的大图像，但是当我尝试显示它们时会导致浏览器滞后。 OP 可能一直在寻找一种预加载图像的方法，但标题暗示了其他方式。不是骗子

标签： javascript jquery css

【解决方案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'
]);

【讨论】：

-1 如果你知道这是骗子，为什么不举报？