image - 初始渲染后下载大型隐藏图像

Question

我的网站显示缩略图。当用户点击图像时，图像会以更大的尺寸显示。图像本身有两种尺寸，用于快速渲染的缩略图尺寸和更大的尺寸。

最初下载并显示缩略图大小。我想要的是在页面渲染/加载后下载更大的图像（但被隐藏）。这样，初始渲染速度很快，但是当用户单击缩略图时，图像已经下载。

起初我是这样做的

<div name = "big_path" style= "display:hidden" src == "" path = "big/path"></div>

在 js/jquery 中，加载后，我将 src 属性设置为路径，导致图像被下载。除了下载图像，我不使用这个 div 元素。

这适用于 IE，但 Chrome 不会下载隐藏图像。因此，当用户单击缩略图时，首先下载图像。也许这已经足够快了，但我更希望已经下载了图像。

该怎么办？

score 0 · Accepted Answer

我最终做的是使 div 可见，但使其为 1px x 1px。然后我把它变成了一个跨度，而不是 div：

<span name = "big_path" style = "width:1px; height:1px" src == "" path = "big/path"></span>

然后，一旦初始渲染完成，我仍然设置 src = path 。

score 0 · Accepted Answer

你可能想做这样的事情：

$(document).ready(function(){
    //load images
    //append images
});

基本上，您是在文档加载后加载大图像。之后，您将像这样附加图像：

$('.thumbnail').append('<img src="img/lol.jpeg" />');

您可能希望将其放在 for 循环中以获取大量缩略图。

另一种解决方案是使用渐进式 jpeg。

2 回答 2