懶惰加載整個DIV，而不是單個圖像

我有一個網頁，這是一個側面滾動。目前所有的內容都是在網頁加載時加載的，但這會變成一個巨大的頁面！我將一些惰性負載應用於圖像等......但它不夠流暢，頁面在嘗試導航時感到尷尬。懶惰加載整個DIV，而不是單個圖像

有7個「窗格」，每個窗格都有一個具有唯一ID的父DIV標籤。我想要做的是當Pane 2進入視圖時，顯示一個加載gif並且在加載所有內容/圖像之前div是空白的。當內容/圖像加載後，加載程序消失，內容淡入。這將重複所有窗格2-7。

我已經看過無數jQuery腳本和方法，但我不能只是似乎把我的頭圍繞如何特別做到這一點。這就像延遲加載，但對於整個div而不僅僅是一個圖像。我希望頁面能夠加載背景，但是阻止用戶看到尚未下載的窗格3，顯示加載圖像的尷尬景象。

然後我意識到這容易嗎？我錯過了什麼？

2012-08-15 Robert E

可能重複[使圖像負載，當他們進入瀏覽器的可見部分？]（HTTP：/ /stackoverflow.com/questions/1736215/make-images-load-when-they-enter-visible-section-of-browser） – 2012-08-15 14:40:15

，有許多方法來實現這一點，最簡單的一個我想簡單地使用jQuery get方法來獲得活動幻燈片實際HTML：

$.get('slide2.html', function(respHTML) { 
    $(respHTML).appendTo($("#contentFrame")); 
},'html');

可以追加HTML之前選擇的所有圖像，並預載他們，有也有衆多的方法來預先載入圖像

var respHTML = $(respHTML); 
var imagesToPreload = respHTML.find('img'); 
var imagesPreloaded = 0; 
var imagesLength = imagesToPreload.length; 
imagesToPreload.each(function(i,img) { 
    // preload img 
    imagesPreloaded++; 
    if(imagesPreloaded == imagesLength) { 
     // your images are ready 
    } 
});

來源

2012-08-15 14:27:04 derki

你可能想的jQuery的。

來源

2012-08-15 14:40:05

您可以使用與轉換和媒體查詢，類似於我做了懶圖像加載這裏CSS招：http://podlipensky.com/2013/06/css-only-load-images-on-demand/

來源

2013-06-05 17:02:55

懶惰加載整個DIV，而不是單個圖像

回答

相關問題