關於Lazyload加載圖片幾種方法的介紹

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 

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