html 结构

<div class="container"><div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img1.png"></div><div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img2.png"></div><div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img3.png"></div><div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img4.png"></div><div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img5.png"></div>
</div>

如何判断元素是否在可视区域

方法一

-通过document.documentElement.clientHeight获取屏幕可视窗口高度

• 通过element.offsetTop获取元素相对于文档顶部的距离
• 通过document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

方法二（推荐）

通过getBoundingClientRect()方法来获取元素的大小以及位置 

function isInSight(el) {const bound = el.getBoundingClientRect();const clientHeight = window.innerHeight;//如果只考虑向下滚动加载//const clientWidth = window.innerWeight;return bound.top <= clientHeight + 100;
}

方法三 IntersectionObserver

var io = new IntersectionObserver(callback, option);
// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

function checkImgs() {const imgs = Array.from(document.querySelectorAll(".my-photo"));imgs.forEach(item => io.observe(item));
}function loadImg(el) {if (!el.src) {const source = el.dataset.src;el.src = source;}
}const io = new IntersectionObserver(ioes => {ioes.forEach(ioe => {const el = ioe.target;const intersectionRatio = ioe.intersectionRatio;if (intersectionRatio > 0 && intersectionRatio <= 1) {loadImg(el);}el.onload = el.onerror = () => io.unobserve(el);});
});

加载图片

function checkImgs() {const imgs = document.querySelectorAll('.my-photo');Array.from(imgs).forEach(el => {if (isInSight(el)) {loadImg(el);}})
}function loadImg(el) {if (!el.src) {const source = el.dataset.src;el.src = source;}
}

建议在上拉滚动停止后调用加载图片的方法