预渲染图像 [重复]

Posted 2023-05-07

【中文标题】预渲染图像 [重复]

【英文标题】：Pre-render images [duplicate]

【发布时间】：2014-01-04 01:47:21

【问题描述】：

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

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

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

【问题讨论】：

您可以通过先将图像加载到图像对象中来将图像放入缓存中。

你研究过 Sprites 的使用吗？

预渲染与预加载完全不同。我自己正在寻找一种非 hacky 的方式来预渲染 我已经预加载 的大图像，但是当我尝试显示它们时会导致浏览器滞后。 OP 可能一直在寻找一种预加载图像的方法，但标题暗示了其他方式。不是骗子

【参考方案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 如果你知道这是骗子，为什么不举报？