為什么寫這篇文章?

1.優(yōu)化頁(yè)面很實(shí)用的方法，技術(shù)實(shí)現(xiàn)不難;

2.搜索了相關(guān)內(nèi)容的文章，好像都是用jQuery的方法，可是如果不用jQuery的站長(zhǎng)難道就不能用這種方法了么;

3.做技術(shù)分享也是在讓更多人幫自己測(cè)試，因?yàn)檫@個(gè)本人沒有在項(xiàng)目中實(shí)際用到，都是自己琢磨的，所有如果有問題請(qǐng)大家指出，先謝謝了;

現(xiàn)在的頁(yè)面大多都具有的特點(diǎn) - 內(nèi)容豐富，圖片較多;像我們經(jīng)常瀏覽的淘寶，京東，團(tuán)購(gòu)網(wǎng)站之類的(本人網(wǎng)購(gòu)控，屬于一個(gè)月不在網(wǎng)上花點(diǎn)錢就不痛快)，一個(gè)頁(yè)面幾十張圖片那叫毛毛雨，所以現(xiàn)在流行起了一個(gè)方法 - 滾動(dòng)動(dòng)態(tài)加載。這個(gè)方法能解決很大程度的HTTP請(qǐng)求，首先頁(yè)面只加載窗口顯示區(qū)的圖片，只有等到頁(yè)面滾動(dòng)，且滾動(dòng)到相應(yīng)位置的時(shí)候再去加載圖片，這樣做網(wǎng)頁(yè)加載快了(請(qǐng)求少了，加載的東西少了能不提快么)。在《高性能Web開發(fā)指南》***章就說到，減少HTTP請(qǐng)求的重要性，這是提高網(wǎng)頁(yè)前端性能，優(yōu)化頁(yè)面加載速度很實(shí)用的做法。

原理：

1.給頁(yè)面綁定滾動(dòng)事件;

2.加載頁(yè)面的時(shí)候把真正的圖片地址放在某屬性中;

3.然后再滾動(dòng)過程中判斷元素是否進(jìn)入當(dāng)前瀏覽器窗口內(nèi);

4.***加載圖片，當(dāng)然加載什么，用什哪種用戶體驗(yàn)都得由你決定;

難點(diǎn)：

瀏覽器兼容是造成難點(diǎn)的原因所在，DOM標(biāo)準(zhǔn)和IE標(biāo)準(zhǔn)，每天前端的工作都在和它們打交道。思考下面的幾段代碼

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

目的:獲得當(dāng)前頁(yè)面相對(duì)于窗口顯示區(qū)左上角的 Y 位置.

DOM標(biāo)準(zhǔn):window.pageYOffset;

IE標(biāo)準(zhǔn):window.document.documentElement.scrollTop

2.window.innerHeight ? window.innerHeight : document.documentElement.clientHeight

目的:聲明了窗口的文檔顯示區(qū)的高度和寬度，以像素計(jì).

DOM標(biāo)準(zhǔn):innerheight 和 innerwidth;

IE標(biāo)準(zhǔn):document.documentElement 或 ducument.body (與 DTD 相關(guān))的 clientWidth 和 clientHeight 屬性作為替代

3.obj.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop

目的:獲取頁(yè)面元素的位置.

當(dāng)瀏覽器為 非webkit內(nèi)核 時(shí)，document.body.scrollTop值恒定為0，使用 document.documentElement.scrollTop才能取到正確值 ;

當(dāng)瀏覽器為 webkit內(nèi)核 時(shí)，document.documentElement.scrollTop值恒定為0，使用 document.body;

我還搜索到一種說法是和DTD相關(guān)(即 當(dāng)頁(yè)面指定了 DOCTYPE時(shí)，使用 document.documentElement ; 當(dāng)頁(yè)面沒有指定了 DOCTYPE時(shí)，使用 document.body)，請(qǐng)確定知道的朋友幫忙指出下，不勝感謝。

細(xì)節(jié)：

1.因?yàn)檎嬲牡刂纷畛跏窃谀硨傩灾?默認(rèn)是xsrc，可自己設(shè)置)，所以默認(rèn)的圖片地址***是一個(gè)像素的透明圖片，這樣可以避免在瀏覽器中出現(xiàn)紅X;

2.在圖片load的時(shí)候可以加入等待的圖片，這樣用戶才會(huì)知道這里有圖片需要加載，良好的用戶體驗(yàn)是前端一直所追求的(例子中有體現(xiàn));

3.在圖片load成功后可以加入合適的顯示效果(例子中木有體現(xiàn)，可以自己嘗試);

JavaScript源碼如下：

var scrollLoad = (function (options) {  
        var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', time: options.time ||300};  
        var camelize = function (s) {  
            return s.replace(/-(\w)/g, function (strMatch, p1) {  
                return p1.toUpperCase();  
            });  
        };  
        this.getStyle = function (element, property) {  
            if (arguments.length != 2) return false;  
            var value = element.style[camelize(property)];  
            if (!value) {  
                if (document.defaultView && document.defaultView.getComputedStyle) {  
                    var css = document.defaultView.getComputedStyle(element, null);  
                    value = css ? css.getPropertyValue(property) : null;  
                } else if (element.currentStyle) {  
                    value = element.currentStyle[camelize(property)];  
                }  
            }  
            return value == 'auto' ? '' : value;  
        };  
        var _init = function () {  
            var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,  
                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),  
                docImg = document.images,  
                _len = docImg.length;  
            if (!_len) return false;  
            for (var i = 0; i < _len; i++) {  
                var attrSrc = docImg[i].getAttribute(defaults.src),  
                    o = docImg[i], tag = o.nodeName.toLowerCase();  
                if (o) {  
                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));  
                    if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {  
                        if (tag === "img" && attrSrc !== null) {  
                            o.setAttribute("src", attrSrc);  
                        }  
                        o = null;  
                    }  
                }  
            };  
            window.onscroll = function () {  
                setTimeout(function () {  
                    _init();  
                }, defaults.time);  
            }  
        };  
        return _init();  
    });  
    scrollLoad();   

***，祝大家工作愉快，學(xué)習(xí)進(jìn)步，哈哈..

demo下載

可傳遞一個(gè)參數(shù)設(shè)置src原地址和響應(yīng)時(shí)間

原文：http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html

【編輯推薦】

1.  JavaScript入門
2. JavaScript入門之基本函數(shù)
3. JavaScript內(nèi)核之基本概念
4. JavaScript入門之對(duì)象與JSON
5. 10個(gè)對(duì)JavaScript開發(fā)者超級(jí)有用的工具