最近接的項目終于接近尾聲骗炉，這段時間一直沒有造輪子仇味，在實(shí)現(xiàn)設(shè)計圖還原的途中呻顽，發(fā)現(xiàn)還是有一些技術(shù)需要掌握，難者不會丹墨，會者不難廊遍，沒有實(shí)際操作過的東西在項目中毫無頭緒，而懶加載在實(shí)際開發(fā)中是一個很有效的東西贩挣，在頁面中我們往往需要放上很多張圖喉前，性能是個大問題，一次性加載所有圖片一般都會卡很久王财，因此卵迂，在需要預(yù)覽的時候再加載，是一個很好的解決方案绒净。
參考了https://www.denpe.com/javascript-images-lazyload/
實(shí)現(xiàn)懶加載有很多種方法见咒，但基本原理是相同的，就是當(dāng)圖片出現(xiàn)在瀏覽器可視區(qū)域中時挂疆，再把圖片的url傳給它论颅，也可以在這個時候創(chuàng)建圖片哎垦，而圖片被包裹在一個容器中，比如li或div恃疯，圖片的url放在其容器的自定義屬性data-src中；
考慮到模塊的獨(dú)立墨闲，這里不用容器今妄，直接使用img
原理圖.png
判定其加載條件是，當(dāng)圖片距離頁面頂端的距離小于瀏覽器滾動距離加上可視區(qū)域高度鸳碧，即它出現(xiàn)在可視區(qū)域時盾鳞，就加載它；
- 獲取圖片距離頁面頂端的高度利用offsetTop計算出其距離offsetParent的高度瞻离，再循環(huán)疊加腾仅，最終獲取到其距離頁面頂端的高度：
//offsetTop是元素與offsetParent的距離，循環(huán)獲取直到頁面頂部
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetParent;
}
return T;
}
- 可視區(qū)域高度為
var H = window.innerHeight;
- 滾動距離為
var S = document.documentElement.scrollTop || document.body.scrollTop;
然后定義賦值函數(shù)
function lazyLoad(imgs) {
var H = window.innerHeight;
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
最后在把頁面滾動函數(shù)賦值給元素window.onload套利，在所有元素加載完以后再進(jìn)行操作推励，這一步很重要！
window.onload = window.onscroll = function () {
lazyLoad(imgs);
}
全部代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片懶加載</title>
</head>
<style>
img {
display: block;
}
</style>
<body>
<div>
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
<img src="" data-src="images/girl1.jpg" alt="圖片">
</div>
</body>
<script type="text/javascript">
var imgs = document.querySelectorAll('img');
//offsetTop是元素與offsetParent的距離肉迫，循環(huán)獲取直到頁面頂部
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
function lazyLoad(imgs) {
var H = window.innerHeight;
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
window.onload = window.onscroll = function () {
lazyLoad(imgs);
}
// var imgs = document.body.querySelectorAll('img'),
// H = window.innerHeight; //瀏覽器視窗高度
// function lazyload() {
// var S = document.documentElement.scrollTop || document.body.scrollTop; //滾動條滾過高度
// [].forEach.call(imgs, function (img) {
// if (!img.getAttribute('data-src')) {
// return
// } //已經(jīng)替換過的跳過
// if (H + S - 200 > getTop(img)) { //為達(dá)到演示效果验辞，這里H+S減去200，延后加載時機(jī)
// img.src = img.getAttribute("data-src");
// img.removeAttribute("data-src");
// }
// });
// [].every.call(imgs, function (img) {
// return !img.getAttribute('data-src')
// }) && (window.removeEventListener("scroll", lazyload, false)); //完成所有替換后注銷事件
//
// }
//
// window.addEventListener("scroll", lazyload, false);
// window.addEventListener("load", lazyload, false);
//
// function getTop(e) {
// var T = e.offsetTop;
// while (e = e.offsetParent) {
// T += e.offsetTop
// }
// return T
// }
</script>
</html>
下面注釋的是比較完善的方法喊衫，還有其他實(shí)現(xiàn)方法跌造。
