延遲加載外部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()的方法沒怎麼用到，有興趣的碼友能夠去試一下~