動態加載圖片

Question

我必須在單個頁面中顯示大量不同大小的Image。

<div id="box1"> 
<span>Something About Image Goes Here</span> 
<img src="img1.jpg" id="img1" /> 
</div> 
<div id="box2"> 
<span>Something About Image Goes Here</span> 
<img src="img2.jpg" id="img2" /> 
</div> 
--- 
--- 
<div id="box30"> 
<span>Something About Image Goes Here</span> 
<img src="img30.jpg" id="img30" /> 
</div> 

我的網頁會花費太多時間，如果我用這樣的代碼完全加載，所以我想，所有的圖像不應該加載一次只Images within viewport（網頁的可見部分）應加載第一和休息應加載當用戶滾動到他們。

注意
我不希望它爲text（圖像信息我在代碼中使用），文本通常應出現一次。
作爲Facebook的用戶時，向下滾動，它加載新的內容，但在這裏，我只想爲圖片，我使用的是裝飾div，當用戶向下滾動相應圖像必須出現在該專區。 （我想還添加加載圖像，直到PIC負載完全）

Answer 1

您可以使用jQuery lazyload plugin了點。

延遲加載是一個jQuery插件用JavaScript編寫的。它延遲了在長網頁中加載圖像的 。在用戶滾動到它們之前，視口外部的圖像（網頁的可見部分 ）將不會被加載。