原理
對(duì)于<img>標(biāo)簽迫肖，在初次加載時(shí)锅劝，不把URI放在src屬性中，而是自定義一個(gè)屬性蟆湖，比如data-src故爵，然后僅當(dāng)圖片滾入視窗，被用戶看到時(shí)隅津，它才會(huì)真正加載诬垂。下圖詳解了如何判斷何時(shí)加載圖片。
判斷何時(shí)加載圖片
- 瀏覽器可視區(qū)域高度H伦仍，通常是固定的(這里不考慮手動(dòng)調(diào)整窗口大小)
window.innerHeight可取得此值结窘。 - 圖片距離頁(yè)面頂端的距離T，也是固定值可用
offsetTop(或getBoundingClientRect().top)方法計(jì)算充蓝。 - 瀏覽器滾動(dòng)條滾過(guò)高度S隧枫，這是唯一變化的值
document.documentElement.scrollTop||document.body.scrollTop
計(jì)算。
當(dāng) H + S > T 時(shí)該圖片出現(xiàn)在可視區(qū)域谓苟。
實(shí)現(xiàn)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圖片延遲加載示例 - 吃飽了還餓</title>
<style>
div {
width: 50%;
margin: auto;
}
img {
display: block;
width: 550px;
height: 550px;
margin: 20px 0;
background: url(https://www.denpe.com/assets/favicon.ico) no-repeat center;
}
</style>
</head>
<body>
<div>
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/3.jpg">
<img src="" data-src="img/4.jpg">
<img src="" data-src="img/5.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
</div>
<script type="text/javascript">
const imgs = document.body.querySelectorAll("img");
const H = window.innerHeight;
function getTop(e) {
let top = e.offsetTop;
console.log(top);
while (e = e.offsetParent) {
top += e.offsetTop;
}
return top;
}
function lazyload() {
let S = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = 0; i < imgs.length; i++) {
if (imgs[].getAttribute("data-src")) {
if (H + S - 200 > getTop(imgs[i])) {//為達(dá)到演示效果官脓，這里H+S減去200，延后加載時(shí)機(jī)
imgs[i].src = imgs[i].getAttribute("data-src");
imgs[i].removeAttribute("data-src");
}
}
}
}
window.addEventListener("scroll", lazyload, false);
window.addEventListener("load", lazyload, false);
</script>
</body>
</html>
參考
offsetTop,offsetParent
原生JS延時(shí)加載
每天努力一點(diǎn)點(diǎn)
謝謝你看完
