網頁前端開發，對於圖片慢載入簡介

技術背景

      現在的網頁系統，對於一些對圖片資源比較多，並且一次性無法瀏覽完整個網頁的情況下，圖片慢載入可以提高用戶端的體驗，如IT大頭：淘寶，網易，新浪等等。。。

  技術原理

　   技術說穿了其實也就那麼回事，懂了就簡單了，呵呵~

     1.   預設圖片的屬性，“src"指向一個小圖，"_src"指向真是的圖片地址；

     2.   擷取瀏覽器滾動事件；

     3.   計算當前瀏覽器下拉的位置，通過高度判斷是否需要載入圖片；

     4.   對需要替換的圖片，設定真實的src值為（原_src值）

  

   技術實現

     這邊我寫了一個DEMO，會在網頁的最後給出下載連結 ^__^

那現在我描述一下這個DEMO的實現，本DEMO不包含設計問題，只提供技術思路。

   首先我建了一個空的網站系統，添加了對應的檔案資源，如圖所示：

   content/images目錄存放2個圖片，分別為：NOPIC.PNG/未載入小圖 ，TEST.PNG/需要載入的圖片

   根目錄2個JS檔案，分別是：jquery-1.8.0.min.js（jquery檔案），index.js（實現指令碼）

   根目錄Default.aspx，目標測試頁面，以下為HTML的收縮截圖，紅色框為展示圖片區，需要慢載入的圖片：

  以下為index.js的核心片段代碼：

//高度計算函數TestWeb.LayoutScroll = function (config) {    var me = this;    var defaults = {        //參數        box: null,        isGoo: false,        //初始化        init: function () {            //是否為ie，並讀出ie版本            me.isIE = !!navigator.userAgent.match(/MSIE\b\s*([0-9]\.[0-9]);/img);            me.isIE && (me.isIE = RegExp.$1);            me.isGoo = !!navigator.userAgent.match(/AppleWebKit\b/img);            me.box = me.isIE ? document.documentElement : document;            me.bind();        },        bind: function () {            me.box.onscroll = function () {                //讀取捲軸的位置和瀏覽器視窗的顯示大小                var top = me.isGoo ? document.body.scrollTop : document.documentElement.scrollTop,                    left = me.isGoo ? document.body.scrollLeft : document.documentElement.scrollLeft,                    width = document.documentElement.clientWidth,                    height = document.documentElement.clientHeight;                           var lookHeight = top + height;                               var headerH = 120;                var textH = 300;                var imageH = 300;                //計算出高度進行src替換                if (lookHeight > (headerH + textH + imageH + 600)) {                    $("#ImageList2 img").each(function () {                        var src = $(this).attr("_src");                        $(this).attr("src", src);                    });                }                //計算出高度進行src替換                if (lookHeight > (headerH + (textH + imageH) * 2) + 600) {                    $("#ImageList3 img").each(function () {                        var src = $(this).attr("_src");                        $(this).attr("src", src);                    });                }                //計算出高度進行src替換                if (lookHeight > (headerH + (textH + imageH) * 3) + 600) {                    $("#ImageList4 img").each(function () {                        var src = $(this).attr("_src");                        $(this).attr("src", src);                    });                }            }        }    };    TestWeb.apply(me, config, defaults);    me.init();  //init}

DEMO下載

  本人用Google瀏覽器 24.0.1312.5、IE8測試通過，有興趣的朋友可以下載DEMO，用開發人員工具跟蹤下指令碼的執行。

  下載地址：點擊我下載