JavaScript實現(xiàn)頁面滾動圖片加載(仿lazyload效果)
更新時間：2011年07月22日 00:41:33 作者：
網(wǎng)上的很多這樣的效果都是用jQuery的方法，可是如果不用jQuery的站長難道就不能用這種方法了么
為什么寫這篇文章？
1.優(yōu)化頁面很實用的方法，技術(shù)實現(xiàn)不難；
2.搜索了相關(guān)內(nèi)容的文章，好像都是用jQuery的方法，可是如果不用jQuery的站長難道就不能用這種方法了么；
3.做技術(shù)分享也是在讓更多人幫自己測試，因為這個本人木有在項目中實際用到，都是自己琢磨的，所有如果有問題請大家指出，先謝謝了；
4.這個月的博客還沒寫；
5.剛好木有工作任務(wù)，此時不寫更待何時...
現(xiàn)在的頁面大多都具有的特點 - 內(nèi)容豐富，圖片較多；像我們經(jīng)常瀏覽的淘寶，京東，團購網(wǎng)站之類的（本人網(wǎng)購控，屬于一個月不在網(wǎng)上花點錢就不痛快），一個頁面幾十張圖片那叫毛毛雨，所以現(xiàn)在流行起了一個方法 - 滾動動態(tài)加載。這個方法能解決很大程度的HTTP請求，首先頁面只加載窗口顯示區(qū)的圖片，只有等到頁面滾動，且滾動到相應(yīng)位置的時候再去加載圖片，這樣做網(wǎng)頁加載快了（請求少了，加載的東西少了能不提快么）。在《高性能網(wǎng)站建設(shè)指南》第一章就說到，減少HTTP請求的重要性，這是提高網(wǎng)頁前端性能，優(yōu)化頁面加載速度很實用的做法。
原理：
1.給頁面綁定滾動事件；
2.加載頁面的時候把真正的圖片地址放在某屬性中；
3.然后再滾動過程中判斷元素是否進入當(dāng)前瀏覽器窗口內(nèi)；
4.最后加載圖片，當(dāng)然加載什么，用什哪種用戶體驗都得由你決定；
難點：
瀏覽器兼容是造成難點的原因所在，DOM標(biāo)準(zhǔn)和IE標(biāo)準(zhǔn)，每天前端的工作都在和它們打交道。思考下面的幾段代碼
1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop
目的:獲得當(dāng)前頁面相對于窗口顯示區(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ū)的高度和寬度，以像素計.
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
目的:獲取頁面元素的位置.
當(dāng)瀏覽器為 非webkit內(nèi)核 時，document.body.scrollTop值恒定為0，使用 document.documentElement.scrollTop才能取到正確值 ;
當(dāng)瀏覽器為 webkit內(nèi)核 時，document.documentElement.scrollTop值恒定為0，使用 document.body;
我還搜索到一種說法是和DTD相關(guān)（即 當(dāng)頁面指定了 DOCTYPE時，使用 document.documentElement ; 當(dāng)頁面沒有指定了 DOCTYPE時，使用 document.body），請確定知道的朋友幫忙指出下，不勝感謝。
細(xì)節(jié)：
1.因為真正的地址最初是在某屬性中(默認(rèn)是xsrc，可自己設(shè)置)，所以默認(rèn)的圖片地址最好是一個像素的透明圖片，這樣可以避免在瀏覽器中出現(xiàn)紅X；
2.在圖片load的時候可以加入等待的圖片，這樣用戶才會知道這里有圖片需要加載，良好的用戶體驗是前端一直所追求的(例子中有體現(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();
可傳遞一個參數(shù)設(shè)置src原地址和響應(yīng)時間
scrollLoad({
src:'userSrc'， //字符串型
time: 100 //數(shù)字型
})
demo下載
1.優(yōu)化頁面很實用的方法，技術(shù)實現(xiàn)不難；
2.搜索了相關(guān)內(nèi)容的文章，好像都是用jQuery的方法，可是如果不用jQuery的站長難道就不能用這種方法了么；
3.做技術(shù)分享也是在讓更多人幫自己測試，因為這個本人木有在項目中實際用到，都是自己琢磨的，所有如果有問題請大家指出，先謝謝了；
4.這個月的博客還沒寫；
5.剛好木有工作任務(wù)，此時不寫更待何時...
現(xiàn)在的頁面大多都具有的特點 - 內(nèi)容豐富，圖片較多；像我們經(jīng)常瀏覽的淘寶，京東，團購網(wǎng)站之類的（本人網(wǎng)購控，屬于一個月不在網(wǎng)上花點錢就不痛快），一個頁面幾十張圖片那叫毛毛雨，所以現(xiàn)在流行起了一個方法 - 滾動動態(tài)加載。這個方法能解決很大程度的HTTP請求，首先頁面只加載窗口顯示區(qū)的圖片，只有等到頁面滾動，且滾動到相應(yīng)位置的時候再去加載圖片，這樣做網(wǎng)頁加載快了（請求少了，加載的東西少了能不提快么）。在《高性能網(wǎng)站建設(shè)指南》第一章就說到，減少HTTP請求的重要性，這是提高網(wǎng)頁前端性能，優(yōu)化頁面加載速度很實用的做法。
原理：
1.給頁面綁定滾動事件；
2.加載頁面的時候把真正的圖片地址放在某屬性中；
3.然后再滾動過程中判斷元素是否進入當(dāng)前瀏覽器窗口內(nèi)；
4.最后加載圖片，當(dāng)然加載什么，用什哪種用戶體驗都得由你決定；
難點：
瀏覽器兼容是造成難點的原因所在，DOM標(biāo)準(zhǔn)和IE標(biāo)準(zhǔn)，每天前端的工作都在和它們打交道。思考下面的幾段代碼
1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop
目的:獲得當(dāng)前頁面相對于窗口顯示區(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ū)的高度和寬度，以像素計.
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
目的:獲取頁面元素的位置.
當(dāng)瀏覽器為 非webkit內(nèi)核 時，document.body.scrollTop值恒定為0，使用 document.documentElement.scrollTop才能取到正確值 ;
當(dāng)瀏覽器為 webkit內(nèi)核 時，document.documentElement.scrollTop值恒定為0，使用 document.body;
我還搜索到一種說法是和DTD相關(guān)（即 當(dāng)頁面指定了 DOCTYPE時，使用 document.documentElement ; 當(dāng)頁面沒有指定了 DOCTYPE時，使用 document.body），請確定知道的朋友幫忙指出下，不勝感謝。
細(xì)節(jié)：
1.因為真正的地址最初是在某屬性中(默認(rèn)是xsrc，可自己設(shè)置)，所以默認(rèn)的圖片地址最好是一個像素的透明圖片，這樣可以避免在瀏覽器中出現(xiàn)紅X；
2.在圖片load的時候可以加入等待的圖片，這樣用戶才會知道這里有圖片需要加載，良好的用戶體驗是前端一直所追求的(例子中有體現(xiàn))；
3.在圖片load成功后可以加入合適的顯示效果(例子中木有體現(xiàn)，可以自己嘗試)；
JavaScript源碼如下：
復(fù)制代碼 代碼如下:
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();
可傳遞一個參數(shù)設(shè)置src原地址和響應(yīng)時間
復(fù)制代碼 代碼如下:
scrollLoad({
src:'userSrc'， //字符串型
time: 100 //數(shù)字型
})
demo下載
您可能感興趣的文章:
- js阻止移動端頁面滾動的兩種方法
- 解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
- js網(wǎng)頁側(cè)邊隨頁面滾動廣告效果實現(xiàn)
- 基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- js實現(xiàn)的鼠標(biāo)滾輪滾動切換頁面效果(類似360默認(rèn)頁面滾動切換效果)
- js頁面滾動時層智能浮動定位實現(xiàn)(jQuery/MooTools)
- Javascript實現(xiàn)頁面滾動時導(dǎo)航智能定位
- 原生Js頁面滾動延遲加載圖片實現(xiàn)原理及過程
- JS實現(xiàn)隨頁面滾動顯示/隱藏窗口固定位置元素
- 原生js實現(xiàn)頁面滾動動畫
相關(guān)文章
javaScript如何跳出多重循環(huán)break、continue
這篇文章主要為大家詳細(xì)介紹了javaScript如何跳出多重循環(huán)break、continue，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript DOM 學(xué)習(xí)總結(jié)(五)
當(dāng)頁面加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。文檔對象模型定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法，本篇文章給大家介紹javascript dom 學(xué)習(xí)總結(jié)(五)，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
vite打包優(yōu)化vite-plugin-compression的使用示例詳解
這篇文章主要介紹了vite打包優(yōu)化vite-plugin-compression的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了微信小程序組件傳值圖示過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本
這篇文章主要介紹了javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS實現(xiàn)控制表格單元格垂直對齊的方法,涉及javascript操作表單元素樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS獲取客戶端IP地址、MAC和主機名的7個方法匯總,JS本身是不支持獲取IP地址等信息的,本文通過其它方法實現(xiàn),需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了Ionic2開發(fā)環(huán)境的搭建教程，文中步驟介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了微信小程序前端promise封裝代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11