Question

我的网站显示缩略图。当用户点击图像时，图像以更大的尺寸显示。图像本身以两种尺寸存在，缩略图大小用于快速渲染，然后是较大尺寸。

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

起初我是通过

做到的

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

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

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

怎么办？

Answer 1

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

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

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

Answer 2

您可能想要这样做：

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

基本上，您在加载文档后加载大图像。之后，您将附加如下图像：

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

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

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