轉(zhuǎn)載自：https://juejin.im/post/5add55dd6fb9a07aad171f76
應(yīng)用場(chǎng)景：
如果一個(gè)頁(yè)面如果有許多張圖片要加載，可以通過(guò)懶加載的方式來(lái)達(dá)到提升圖片加載速度的效果、
實(shí)現(xiàn)思路：
通過(guò)data-src屬性存儲(chǔ)的圖片真實(shí)地址,此時(shí)的Img標(biāo)簽沒(méi)有src屬性妻导，當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí)，通過(guò)設(shè)置img標(biāo)簽的src屬性來(lái)實(shí)現(xiàn)加載圖片抛丽，
判斷圖片是否進(jìn)入可視區(qū)域
兩種方法：
方法一：
判斷該圖片距離document頂部的距離是否小于可視區(qū)域距離document頂部的距離淹真，如果小于检激，則加載圖片
可視區(qū)域高度：const clientHeight = document.documentElement.clientHeight; // 視口高度巍扛，也就是窗口的高度领跛。
可視區(qū)域距離document頂部的距離：const scrollHeight = document.documentElement.scrollTop + clientHeight; // 滾動(dòng)條偏移文檔頂部的高度（也就是文檔從頂部開始到可視區(qū)域被抹去的高度） + 視口高度
元素距離document頂部的距離：元素.getBoundingClientRect().top
實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
position: relative;
margin: 20px auto;
padding: 5px 0;
width: 800px;
border: 5px solid #000;
}
.img-area {
margin: 100px 0;
height: 500px;
}
#first {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="img-area">
<img id="first" data-src="https://img.phjrxy.cn//course/20180619/course_liuyong_image2.png" alt="">
</div>
<div class="img-area">
<img data-src="https://img.phjrxy.cn//course/20180619/course_liuyong_image2.png" alt="">
</div>
<div class="img-area">
<img data-src="https://img.phjrxy.cn//course/20180619/course_liuyong_image2.png" alt="">
</div>
<div class="img-area">
<img data-src="https://img.phjrxy.cn//course/20180619/course_liuyong_image2.png" alt="">
</div>
<div class="img-area">
<img data-src="https://img.phjrxy.cn//course/20180619/course_liuyong_image2.png" alt="">
</div>
<div class="img-area">
<img data-src="https://img.phjrxy.cn//course/20180619/course_liuyong_image2.png" alt="">
</div>
</div>
<script>
//方法一
function getTop(el, initVal) {
let top = el.offsetTop + initVal;
if (el.offsetParent !== null) {
top += el.offsetParent.clientTop;
return getTop(el.offsetParent, top);
} else {
return top;
}
}
function inSight(el) {
const clientHeight = document.documentElement.clientHeight;
const scrollHeight = document.documentElement.scrollTop + clientHeight;
// 方法一
// return getTop(el, 0) < scrollHeight;
// 方法二
return el.getBoundingClientRect().top < clientHeight;
}
function loadImg(el) {
if (!el.src) {
el.src = el.dataset.src;
}
}
var count = 0;
function checkImgs() {
const imgs = document.getElementsByTagName('img');
Array.from(imgs).forEach(el => {
if (inSight(el)) {
console.log(el) //el是遍歷的那個(gè)img
loadImg(el);
}
})
console.log(count++);
}
function throttle(fun, delay, time) {
var timeout;
var previous = +new Date();
return function () {
var now = +new Date();
var context = this;
var args = arguments;
clearTimeout(timeout);
if (now - previous >= time) {
fun.apply(context, args);
previous = now;
} else {
timeout = setTimeout(function () {
fun.apply(context, args);
}, delay);
}
}
}
window.addEventListener('scroll', throttle(checkImgs, 200, 1000), false);
window.onload = checkImgs;
</script>
<!-- <script>
// 方法二
function query(tag) {
return Array.from(document.getElementsByTagName(tag));
}
var observer = new IntersectionObserver(
(changes) => {
changes.forEach((change) => {
if (change.intersectionRatio > 0) {
var img = change.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
})
}
)
query('img').forEach((item) => {
observer.observe(item);
})
</script> -->
</body>
</html>
