转载自：https://juejin.im/post/5add55dd6fb9a07aad171f76
应用场景：
如果一个页面如果有许多张图片要加载，可以通过懒加载的方式来达到提升图片加载速度的效果、
实现思路：
通过data-src属性存储的图片真实地址,此时的Img标签没有src属性，当图片出现在可视区域时，通过设置img标签的src属性来实现加载图片，
判断图片是否进入可视区域
两种方法：
方法一：
判断该图片距离document顶部的距离是否小于可视区域距离document顶部的距离，如果小于，则加载图片
可视区域高度：const clientHeight = document.documentElement.clientHeight; // 视口高度，也就是窗口的高度。
可视区域距离document顶部的距离：const scrollHeight = document.documentElement.scrollTop + clientHeight; // 滚动条偏移文档顶部的高度（也就是文档从顶部开始到可视区域被抹去的高度） + 视口高度
元素距离document顶部的距离：元素.getBoundingClientRect().top
实例：
<!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是遍历的那个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>
