初始渲染後下載大型隱藏圖像

Question

我的網站顯示縮略圖。當用戶點擊圖像時，圖像以較大的尺寸顯示。圖像本身以兩種尺寸存在，縮略圖大小用於快速渲染，然後是較大的尺寸。

最初縮略圖大小被下載並顯示。我想要的是在頁面渲染/加載後，下載更大的圖像（但是隱藏）。這樣，最初的渲染速度很快，但是，當用戶單擊縮略圖時，圖像已經下載。

起初，我不希望這

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

在JS/jQuery的，加載後，我然後設置src屬性路徑，導致要下載的圖像。除了下載圖像，我不使用這個div元素。

這適用於IE瀏覽器，但Chrome瀏覽器不下載隱藏圖像。因此，當用戶點擊縮略圖時，圖像首先被下載。也許這個速度夠快，但我寧願已經下載圖像。

怎麼辦？

Answer 1

我最終做的是讓div可見，但使它1px乘以1px。然後我做了一個跨度，而不是div：

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

然後我仍然設置src =路徑，一旦初始渲染完成。

Answer 2

您可能需要做這樣的事情：

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

基本上，您加載的大圖像文件加載之後。之後，你添加這樣的圖像：

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

你可能想把它放在for循環中以獲取很多縮略圖。

另一種解決方案是使用progressive jpegs。