如何在加載的頁面上加載頁面上的所有圖像

Question

我有一頁頁面上有一張jpg圖像列表。包含圖像的div被隱藏，並作爲Galleria jQuery圖庫插件的圖像源。所以，當我加載一個頁面時，加載它需要很長時間，因爲它加載了所有圖像。有沒有辦法在頁面加載時不加載所有這些圖像，而只是當廣場需要它們時？

Answer 1

您可以加載圖像的JSON陣列，而不是把他們的源代碼：

var data = [ 
    { 
     image: 'img1.jpg', 
     thumb: 'thumb1.jpg', 
     title: 'my first image', 
     description: 'Lorem ipsum caption', 
     link: 'http://domain.com' 
    }, 
    { 
     image: 'img2.jpg', 
     thumb: 'thumb2.jpg', 
     title: 'my second image', 
     description: 'Another caption', 
     link: '/path/to/destination.html' 
    } 
]; 

$('#container').galleria({ 
    dataSource: data 
}); 

您還可以添加自定義縮略圖：

<a href="big.jpg"><img src="thumb.jpg"></a> 

廣場識別兩種方式作爲有效數據源。

Answer 2

我不知道它是否以及如何能夠與您的Gallery插件配合使用，但是有一個用於jQuery的Lazy Loading plugin。它在進入視口時加載圖像。也許值得一看。

除此之外，你將不得不調整畫廊插件加載包含的圖像，當它顯示div。一個想法是把所有的圖像src屬性指向一個1x1的透明GIF：

<div class="hidden"> 
<img id="image1" src="http://domain.com/images/1x1.gif"> 
</div> 

，並保持一個JavaScript陣列與真實圖像來源：

<script> 
ImageSources = new Array(); 
ImageSources[1] = "http://domain.com/images/big_fat_image.jpg"; 
... 
</script> 

，並指派真實src財產div得到顯示的時刻。

Answer 3

是的，這取決於你如何加載拱廊你有幾種選擇..

如果通過JS加載它，你可以加載JS以動態的方式，同樣谷歌Analytics（分析）加載它的JS：

(function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

（當然，改變JS負載的地址）

替代解決方案，節省JS的往返（尤其是如果它是從其他來源來和它的水貨），不叫.loadTheme前圖像被加載。

Answer 4

jQuery image lazy load plugin的演示頁面在Mac上的FF3.6上似乎不起作用。我正在用Firebug的Net標籤查看HTTP請求，我可以看到所有加載的圖像。

也許值得看看這個名爲JAIL的插件，它只加載在視口中可見的圖像。

你的HTML可以關注一下：

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height"/> 

和JS

$('img').asynchImageLoader();