Lazyload長頁面圖片的延遲加載：

一，jquery.lazyload.js

?注意事項：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();
})
</script>

?

比較常用的方法

提前加載——Threshold

lazyload默認是當滾動到該圖片位置時，加載該圖片。但是可以通過設置Threshold參數來實現滾到距離其xx px時就加載。

?

//自行就加載了
$(function(){$("img.lazy").lazyload({threshold :20});})

?

　　或

$(window).ready(function(){$("img.lazy").lazyload({threshold :20});})

?

事件觸發(可以是jquery事件，也可以是自定義事件)——Event

當觸發定義的事件時，圖片才開始加載

?

//使圖片點擊后，才開始加載
$(function(){$("img.lazy").lazyload({event : "click"});})

?

同時也可以

//自定義延遲多長時間再觸發加載圖片。這個類似EasyLazyload.js插件，下面會介紹到 $(function() {$("img.lazy").lazyload({event : "sporty"}); });$(window).bind("load", function() {var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000); });

設定效果——Effects

?

//插件默認的加載效果是 show() ,你可以使用任何你想要的效果。比如fadeIn()淡入效果 $("img.lazy").lazyload({effect : "fadeIn" });

?

滾動容器內的圖片——container

?

<!--滾動容器內的圖片。下面的div擁有scrollerbar，內容的內容進行滾動，滾到圖片位置時，圖片開始加載-->
<div style="height:600px;overflow:scroll" id="container"><img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200"><img class="lazy".../> </div> <script>$(function(){$("img.lazy").lazyload({
effect:"fadeIn",//順便添加個效果container: $("#container")});}) </script>

?

　　

?

二，EasyLazyload.js

比較全能的延遲加載，不會對樣式有影響，最主要可以不用特意去設定圖片的width和height（畢竟圖片不一致的寬高大有人需要，難不成還真的一個一個去設定？）而且scroll到照片時，有緩沖視覺效果

<!--先引入Easylazyload.js--> <script src="jquery.min.js"></script> <script src="EasyLazyload.min.js" ><div id="container" style=" overflow:scroll; background-color:black;"> <!--把你想要的圖片來源src換成data-lazy-src--> <img data-lazy-src="img/1.png"> <img data-lazy-src="img/2.png"> <img data-lazy-src="img/3.png" > <img data-lazy-src="img/4.png" > <img data-lazy-src="img/5.png" > </div><script> //調用全局方法lazyLoadInit（） lazyLoadInit({coverColor:"white",//圖片即將顯示時覆蓋層的顏色；coverDiv:"<h1>test</h1>",//覆蓋層可顯示的土自定義組件offsetBottom:0,//圖片距離屏幕底部出現時間點的距離差值（注解：延遲加載圖片會在圖片頂部接觸屏幕底部時出現，如果想要讓圖片頂部距離屏幕底部有一定距離時出現，請設置此值）offsetTopm:0,//圖片距離屏幕底部出現時間點的距離差值（注解：同上，距離頂部）showTime:1100,onLoadBackEnd:function(i,e){console.log("onLoadBackEnd:"+i);}//圖片已經完全出現時的回調函數，參數為（index，event）加載的圖片下標，以及dom對象（dom對象為jquerydom或zeptodom對象）,onLoadBackStart:function(i,e){console.log("onLoadBackStart:"+i);}//圖片已經下載完成，即將開始顯示時的回調函數（參數同上）});</script>

關于Easylazyload.js的幾個問題

如果是從服務器上請求一系列圖片，lazyLoadInit()應該放在哪里觸發？在ajax調用成功后 img的src替換完成后 調用?lazyLoadInit?lazyLoadInit()方法，ajax給img賦值data-lazy-src屬性，然后在ajax success 中調用Init方法，不然初始化的時候img的src屬性還是空的；

用瀑布流ajax動態加載的圖片沒有效果，在ajax里的complete方法中調用lazyLoadInit()試試

?

三，自己用js編寫不依賴jquery?

當然很多大神考慮到頁面性能的分析和處理力度做到最大化，以及用戶滾動到頁面底部之前而懶加載的無智能精準提前加載。比如我讀到的設計無限滾動下拉加載，實踐高性能頁面真諦。 非常值得一看和學習。

?

轉載于:https://www.cnblogs.com/wold/p/7718610.html

總結

以上是生活随笔為你收集整理的关于Lazyload加载图片几种方法的介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

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