?注意事項：jquery.js務必先引進，然后才加載lazyload；img長寬一定要有，每幅長寬可以不一致；在js段，可以不用$(window).ready來加載事件；

1.將圖片路徑寫入data-original屬性
2.給lazyload的圖片增加一個名為lazy的class
3.選擇所有要lazyload的圖片（img.lazy），執行lazyload();

//注意js引入的先后順序 <script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> <img class="lazy" data-original="img/example.jpg" width="1330" height="900"> <img class="lazy" data-original="img/example.jpg" width="400"height="200"> //可以尺寸不一致 ...//無數張你想要加載的照片 <script> //開始全局加載 $(function(){ $("img.lazy").lazyload({effect: "fadeIn"});}) </script>

lazyload配置參數

$("img.lazy").lazyload({placeholder : "img/grey.gif", //用圖片提前占位// placeholder,值為某一圖片路徑.此圖片用來占據將要加載的圖片的位置,待圖片加載時,占位圖則會隱藏effect: "fadeIn", // 載入使用何種效果// effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeInthreshold: 200, // 提前開始加載// threshold,值為數字,代表頁面高度.如設置為200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,可以做到不讓用戶察覺event: 'click', // 事件觸發時才加載// event,值有click(點擊),mouseover(鼠標劃過),sporty(運動的),foobar(…).可以實現鼠標莫過或點擊圖片才開始加載,后兩個值未測試…container: $("#container"), // 對某容器中的圖片實現效果// container,值為某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片failurelimit : 10 // 圖片排序混亂時// failurelimit,值為數字.lazyload默認在找到第一張不在可見區域里的圖片時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域內圖片并沒加載出來的情況,failurelimit意在加載N張可見區域外的圖片,以避免出現這個問題. });

參考地址

http://www.jq22.com/jquery-info390

http://www.cnblogs.com/wold/p/7718610.html

總結

以上是生活随笔為你收集整理的jQuery.lazyload懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。