加載與畫廊的頁面時間太長

我有圖像的列表和一個簡單的畫廊：加載與畫廊的頁面時間太長

<ul id="ulBack"> 
    <li><img src="gallery/01.jpg"/></li> 
    <li><img src="gallery/02.jpg"/></li> 
    ... 
</ul>

，然後點擊prev和next按鈕：

function change(){ 
var goImg = "url(" + $('#ulBack img' + ':eq(' + n +')').attr('src') + ")"; 
$('#divGaLL').css('background-image', goImg); 
};

工程確定，如果我有20-30張圖片，但有超過90張圖片（7 MB）加載頁面需要很長時間，firefox v.21說：連接已重置。

有沒有辦法先加載10-20張圖片，其餘的（在圖庫瀏覽期間）。
或其他任何解決方案。

注意：無序列表#ulBack不會在網頁上顯示。

來源

2013-07-01 bonaca

是在#ulBack列表中可見？ – Andri

@Andri，不，列表不可見。 – bonaca

由於您使用jQuery已經嘗試this plugin。它不會在圖像在瀏覽器中可見之前加載圖像。所有你需要做的就是運行此代碼：

$("#ulBack img").lazyload();

該網站有很多例子和技巧/建議，例如他們建議你lazy類添加到以後要加載的所有圖像。

HTML

<ul id="ulBack"> 
    <li><img data-src="gallery/01.jpg" style="display:none"/></li> 
    <li><img data-src="gallery/02.jpg" style="display:none"/></li> 
    ... 
</ul>

CSS

#ulBack { 
    display: none; 
}

的JavaScript

$("#ulBack img").show().lazyload();

來源

2013-07-01 08:30:01 Broxzier

Broxzier，圖像根本不可見。點擊一個按鈕，只是一個一個的圖像被放置爲div的背景。也許這個插件不會有幫助 – bonaca

@SunSky他們仍然是'img'元素並且有一個'src'屬性，所以我猜這會起作用。如果沒有，也許你可以寫一些東西來加載下一個圖像，一旦按下按鈕。 – Broxzier

好的，我會盡力的。非常感謝。 – bonaca

鑑於您只想要圖庫導航的圖像，請不要設置img元素的src。通過設置src元素，瀏覽器將向您的服務器發送HTTP請求以獲取圖像，這對於大量圖像來說可能是昂貴的。

你可以做什麼：

HTML：

<ul id="ulBack"> 
    <li><img data-src="gallery/01.jpg" style="display:none"/></li> 
    <li><img data-src="gallery/02.jpg" style="display:none"/></li> 
    ... 
</ul>

JS：

function change(){ 
var goImg = "url(" + $('#ulBack img' + ':eq(' + n +')').attr('data-src') + ")"; 
$('#divGaLL').css('background-image', goImg); 
};

來源

2013-07-01 08:28:54

加載與畫廊的頁面時間太長

回答

相關問題