<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片懶加載</title>
</head>
<style type="text/css">
.imglist {
width: 300px;
display: flex;
flex-wrap: wrap;
text-align: center;
}
.lazy {
width: 280px;
height: 280px;
}
</style>
<body>
<div class="imglist">
<img class="lazy" src="img/loading.gif" data-src="img/01.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/02.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/03.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/04.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/05.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/06.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/07.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/08.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/09.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/10.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/11.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/12.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/13.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/14.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/15.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/16.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/17.png" alt="pic">
<img class="lazy" src="img/loading.gif" data-src="img/18.png" alt="pic">
</div>
</body>
<script type="text/javascript">
// onload是等所有的資源文件加載完畢以后再綁定事件
window.onload = function() {
// 獲取圖片列表烛恤，即img標(biāo)簽列表
var imgs = document.querySelectorAll('img');
// 獲取到瀏覽器頂部的距離
function getTop(e) {
return e.offsetTop;
}
// 懶加載實(shí)現(xiàn)
function lazyload(imgs) {
// 可視區(qū)域高度
var h = window.innerHeight;
//滾動區(qū)域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
//圖片距離頂部的距離大于可視區(qū)域和滾動區(qū)域之和時懶加載
if ((h + s) > getTop(imgs[i])) {
// 真實(shí)情況是頁面開始有2秒空白巢钓，所以使用setTimeout定時2s
(function(i) {
setTimeout(function() {
// 不加立即執(zhí)行函數(shù)i會等于9
// 隱形加載圖片或其他資源，
//創(chuàng)建一個臨時圖片掩驱，這個圖片在內(nèi)存中不會到頁面上去。實(shí)現(xiàn)隱形加載
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src'); //只會請求一次
// onload判斷圖片加載完畢泻仙，真是圖片加載完畢，再賦值給dom節(jié)點(diǎn)
temp.onload = function() {
// 獲取自定義屬性data-src，用真圖片替換假圖片
imgs[i].src = imgs[i].getAttribute('data-src')
}
}, 2000)
})(i)
}
}
}
lazyload(imgs);
// 滾屏函數(shù)
window.onscroll = function() {
lazyload(imgs);
}
}
</script>
</html>
參考：'https://blog.csdn.net/w1418899532/article/details/90515969'
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
