為什麼要寫這篇文章？
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 / /數位型
})
