初始渲染后下载大型隐藏图像答案

【问题标题】：Download large hidden image after initial rendering初始渲染后下载大型隐藏图像
【发布时间】：2013-01-06 11:01:10
【问题描述】：

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

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

一开始我是这样做的

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

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

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

怎么办？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你可能想做这样的事情：

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

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

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

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

另一种解决方案是使用progressive jpegs。

【讨论】：