消極式載入外部js檔案，消極式載入圖片（jquery.lazyload.js和echo,js）

標籤：nal   color   settings   網頁   over   lazyload   動畫   port   targe   

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載入隱藏圖片//圖片載入時的事件 (Function)，有 2 個參數：elements_left（未載入的圖片數量）、settings（lazyload的參數）            appear: function(num,setting){          console.log("一開始還剩"+num+"張未載入")      },//圖片載入後的事件 (Function)，有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部分的代碼：

//執行個體化echoecho.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()的方法沒怎麼用到，有興趣的碼友可以去試一下~

消極式載入外部js檔案，消極式載入圖片（jquery.lazyload.js和echo,js）