JQuery.lazyload 圖片延遲加載

1.引入  jquery.lazyload.js

2. 延時加載的方式 

<script type="text/javascript"> 
　　$(function() { 
　　　　$("img").lazyload({ 
　　　　effect : "fadeIn" 
　　　}); 
　　}); 
　　</script> 

3. 把閥值設置成200 意思就是當圖片沒有看到以前先load 200像素。

　　$(「img」).lazyload({ threshold : 200 });

 

4.  經過設置佔位符圖片和自定事件來觸發加載圖片事件。如 event :sporty 和 event : foobar。默認狀況下處於等待狀態, 直到用戶滾動到窗口上圖片所在位置. 在灰色佔位圖片被點擊以前阻止加載圖片。

　　$("img").lazyload({    
　　　　placeholder : "img/grey.gif",    
　　　　event : "click"   
　　　　}); 

5.  帶滾動條的 DIV 元素. 你要作的只是將容器定義爲 jQuery 對象並做爲參數傳到初始化方法裏面.

　　CSS:
　　#container {    
　　height: 600px;    
　　overflow: scroll;    
　　}   

　　JavaScript 代碼:
　　$("img").lazyload({    
　　placeholder : "img/grey.gif",    
　　container: $("#container")    
　　});