延遲加載外部js文件，延遲加載圖片（jquery.lazyload.js和echo,js）

js里一說到延遲加載，大都離不開兩種情形，即外部Js文件的延遲加載，以及網頁圖片的延遲加載：

1.首先簡單說一下js文件的3種延遲加載方式：

(1)<script type=”text/javascript” defer>，defer屬性可以推遲對腳本的解釋，直到文檔已經顯示給用戶為止，但只有IE支持defer屬性

(2)設置具體的延遲時間，對應的js代碼如下：

function loadScript(){
    var myScript=document.createElement("script");
    myScript.src="dafu.js";
    document.body.appendChild(myScript);            
}
setTimeout(function(){
    loadScript();     
},1000)

(3)采用js監聽，直到文檔加載完才會加載指定的外部js文件，對應的js代碼如下：

if (window.addEventListener){
    window.addEventListener("load", loadScript, false);
}else if (window.attachEvent){
    window.attachEvent("onload", loadScript);        
}else {
    window.onload = loadScript; 
}    

2.接下來針對圖片的延遲加載，說一下自己用過的兩款不錯的插件：

(1)基於jquery類庫的jquery.lazyload.js(1.9+)，廢話不多說，直接上代碼，先上布局：

<div class="demo" style="width: 736px; margin:1000px auto;">
    <img class="lazy" src="images/blank.gif" data-original="images/big-1.jpg">
    <img class="lazy" src="images/blank.gif" data-original="images/big-2.jpg">
    <img class="lazy" src="images/blank.gif" data-original="images/big-3.jpg">
    <img class="lazy" src="images/blank.gif" data-original="images/big-4.jpg">
    <img class="lazy" src="images/blank.gif" data-original="images/big-5.jpg">
    <img class="lazy" src="images/blank.gif" data-original="images/big-6.jpg">
    <img class="lazy" src="images/blank.gif" data-original="images/big-7.jpg">
</div>

注意，css樣式里面我是給的.demo img { width: 100%; height: 490px;}，這樣給圖片添加width和height屬性有助於在圖片未加載時占滿所需要的空間；另外，在src屬性中設置占位圖片，例如1x1像素的灰色圖片或者loading的gift動圖，然后在data-original中設置真實的圖片URL，當然src中設置嫌麻煩可以去實例化的參數設置中寫。

然后就是js部分的代碼：

$("img").lazyload({ 
    placeholder:"images/loading.gif", //設定一個占位圖片,待圖片加載時,占位圖則會隱藏，優先調用標簽行內屬性src對應的占位圖
    data_attribute:"original", //真實圖片地址的data屬性后綴，默認為original
    effect:"fadeIn", //默認地使用show()方法來將圖顯示出來，還可以使用其他特效(fadeIn,slideDown)來處理
    threshold:40, //默認情況下圖片會出現在屏幕時加載，threshold可令圖片在距離屏幕多少像素時提前加載，做到不讓用戶察覺
    effectspeed:500,//作為effect的參數使用表示動畫時間，默認為undefined
//    event:"click", //默認情況下處於等待狀態, 直到用戶滾動到窗口上圖片所在位置才開始加載圖片，這里可以設置成某個事件觸發加載(click(點擊),mouseover(鼠標划過),sporty(運動的),foobar(…))
//    container: $("#container"), //默認在拉動瀏覽器滾動條時生效，這里可以將插件用在可滾動容器的圖片上
    failure_limit:10, //默認在找到第一張不在可見區域里的圖片時則不再繼續加載，但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況，failurelimit意在加載N張可見區域外的圖片,以避免出現這個問題
//  skip_invisible:false //默認忽略了隱藏圖片. 將skip_invisible設為false加載隱藏圖片
//圖片加載時的事件，有 2 個參數：elements_left（未加載的圖片數量）、settings（lazyload的參數）      
    appear: function(num,setting){
        console.log("一開始還剩"+num+"張未加載")
    },
//圖片加載后的事件，有2個參數，同appear
    load: function(num,setting){
        console.log("接着還剩"+num+"張未加載")
    }
});     
//頁面加載完成5秒后, 指定區域內的圖片會自動進行加載        
$(window).on("load", function() { 
    setTimeout(function() {$("img").trigger("click")}, 5000);
});
//監聽每張圖片加載完畢
$("img").on("load",function(){
    console.log("剛加載的這張圖片的下標是"+$(this).index());
})        

大部分功能都能實現，感覺不太好的就是不能直接給圖片設置明確的延遲加載時間，詳細介紹請移步http://code.ciaoca.com/jquery/lazyload/。

(2)輕量級插件echo.js，脫離jquery類庫，還能直接設置明確的延遲加載時間，html部分的代碼和上面有一些類似：

<div class="demo" style="width: 736px; margin:1000px auto;">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">
</div>

注意：如果直接自定義一張占位圖片，可能會造成圖片的變形等，這里可以先准備一張1*1px透明gif圖片(blank.gif)，然后用一個loading圖片作背景，即.demo img { width: 100%; height: 490px; background: url(images/loading.gif) no-repeat 50%;}

 然后直接上js部分的代碼：

//實例化echo
echo.init({            
    offset:0,//設置上下左右距離viewport到多少就開始加載圖片，默認為0，即只加載出現在可視區中的圖片，參數取值越大，加載的圖片就會越多
//        offsetVertical:40,//垂直方向距離viewport多少就開始加載圖片，默認值為0
//        offsetHorizontal:0,//水平方向距離viewport多少就開始加載圖片，默認值為0    
//        offsetTop:0, //頂部方向距離viewport多少就開始加載圖片，默認值為offsetVertical
//        offsetButton:0, //底部方向距離viewport多少就開始加載圖片，默認值為offsetVertical
//        offsetLeft:0, //左邊方向距離viewport多少就開始加載圖片，默認值為offsetHorizontal
//        offsetRight:0, //右邊方向距離viewport多少就開始加載圖片，默認值為ooffsetHorizontal
    throttle:1000,//設置圖片延遲加載時間
    callback: function (element, op) {    
        if(op === 'load') {
          element.classList.add('loaded');
        } else {
          element.classList.remove('loaded');
        }
        console.log(element, 'has been', op + 'ed')//傳遞已更新的元素和操作（load或者unload）
    },
    unload:false//默認為false，即當圖片滑動超過了viewport的時候不在加載已經加載過的圖片 
});
//監聽每張圖片加載完畢
$("img").on("load",function(){
    console.log($(this).index());
})

主要功能都測試過，沒有明顯的問題，還有個echo.reader()的方法沒怎么用到，有興趣的碼友可以去試一下~