JavaScript實作頁面滾動圖片加載

為什麼要寫這篇文章？

　　1.優化頁面很實用的方法，技術實現不難；

　　2.搜尋了相關內容的文章，好像都是用jQuery的方法，可是如果不用jQuery的站長難道就不能用這種方法了麼；

　　3.做技術分享也是在讓更多人幫自己測試，因為這個本人木有在項目中實際用到，都是自己琢磨的，所有如果有問題請大家指出，先謝謝了；

　　4.這個月的部落格還沒寫；

　　5.剛好木有工作任務，此時不寫更待何時...

 

　　現在的頁面大多都具有的特點- 內容豐富，圖片較多；像我們常瀏覽的淘寶，京東，團購網站之類的（本人網購控，屬於一個月不在網上花點錢就不痛快），一個頁面幾十張圖片那叫毛毛雨，所以現在流行起了一個方法- 滾動動態載入。這個方法能解決很大程度的HTTP請求，首先頁面只加載視窗顯示區的圖片，只有等到頁面滾動，且滾動到相應位置的時候再去加載圖片，這樣做網頁加載快了（請求少了，加載的東西少了能不提快麼）。在《高效能網站建立指南》第一章就說到，減少HTTP請求的重要性，這是提高網頁前端效能，優化頁面載入速度很實用的做法。

 

 

　　原理：

       1.給頁面綁定圖片        3.然後再捲動過程中判斷元素是否進入目前瀏覽器視窗內；

       4.最後載入圖片，當然載入什麼，使用什哪種使用者體驗都得由你決定；

 

　　難點

 

　　難點

 

　　難點標準和IE標準，每天前端的工作都在和它們打交道。思考下面的幾段程式碼

　　1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop

     pageYOffset;

       IE標準:window.document.documentElement.scrollTop

　　2.window.innerHeight ? 區的高度和寬度，以像素計.

       DOM標準:innerheight 和innerwidth;

       IE標準:innerheight 和innerwidth;

       IE標準:document.documentElement 或ducument。 Rect().top + window.document. documentElement.scrollTop + window.document.body.scrollTop

       目的:取得頁面元素的位置.

      到正確值;

       當瀏覽器為webkit核心時，document.documentElement.scrollTop值恆定為0，使用document.body;

     ，使用document.documentElement ; 當頁面沒有指定了DOCTYPE時，使用document.body），請確定知道的朋友幫忙指出下，不勝感謝。

 

　　細節：

        1.因為真正的地址最初是在某屬性中(默認是xsrc，可自己設定)，所以預設的圖片地址最好是一個像素的透明圖片，這樣可以避免在瀏覽器中出現紅X；

       2.在圖片load的時候可以加入等待的圖片，這樣用戶才會知道這裡有圖片需要加載，良好的用戶體驗是前端一直所追求的(例子中有體現) ；

       3.在圖片load成功後可以加入適當的顯示效果(例中木有體現，可以自己嘗試)；

 -------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------

 JavaScript源碼如下：

var scrollLoad = (function (options) {

        var defaults = (arguments.length == 0) ? src  var defaults = (arguments.length == 0) ? time: 300} : { src: options.src || 'xSrc', time: options.time ||300};

        var camelize = function (s) {

            return s.replace(/-(w)/g, function (strMatch, p1) {

              });

        };

        this.getStyle = 函數（元素、屬性) ) {

            if (arguments.length != 2) return false;

              if (!value) {

               if (document.defaultView && document. defaultView .getCompulatedStyle) {

                    var css = 韠        value = css ? css.getPropertyValue(property) : null;

                } elseif (element.current  ement.currentStyle[camelize(property)];

                }

    'auto' ？ '' : value;

        };

        var _init = function () { window.pageYOffset : window.document.documentElement.scrollTop,

                offsetWindow = offsetPage + Number(window.incli;                docImg = document.images,

            ;

           if (!_len) return false;

                var attrSrc = docImg[i].getAttribute(defaults.src),

              i], tag = o.nodeName.toLowerCase();

               if (o) {

  Rect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));

             Page && postWindow                       if (tag === "img" &            o.setAttribute("src", attrSrc);

                           o = null;

                 }

            };

            window.onscroll = function () {

                     _init();

                }, defaults.time);  

        return _init();

    }) ;

    scrollLoad(); 

 

demo下載

 可傳遞一個參數設定src原位址與回應時間  

型

scroll    time: 100       / /數位型

})