无图无真相，首先二话不说，点此查看效果（图片用的国外的，国内网络有可能会加载不出来）
1. 为什么要懒加载
我们都知道，图片加载速度比较慢，当页面中图片较多时，会影响用户体验。其实，有时候我们只需要加载首屏的图片就可以了，其他的图片可以等他们进入视窗后再动态加载。
2. 懒加载原理
懒加载其实很简单。图片先用占位符表示，真实的图片地址放到元素属性中，比如data-src。然后当页面加载完成后，监听窗口滚动，当图片出现在视窗中时将data-src中的值拿出来放到src属性中。
注意：需要使用函数的节流或防抖避来免加载过于频繁。
3. 懒加载具体代码实现
判断元素进入视口viewport
function isInViewport(el) {
const inBelow = el.getBoundingClientRect().top > window.innerHeight // 元素在屏幕下方的情况
const inAbove = el.getBoundingClientRect().bottom < 0 // 元素在屏幕上方的情况
const visible = getComputedStyle(el).display !== "none" // 元素display样式为none
return !inBelow && !inAbove && visible
}
html结构：假设有很多图片
<div class="image-box">
<img src="image/placeholder.png" class="lazy" data-src="https://i.picsum.photos/id/10/300/300.jpg" alt="image"/>
<img src="image/placeholder.png" class="lazy" data-src="https://i.picsum.photos/id/11/300/300.jpg" alt="image"/>
<img src="image/placeholder.png" class="lazy" data-src="https://i.picsum.photos/id/12/300/300.jpg" alt="image"/>
<img src="image/placeholder.png" class="lazy" data-src="https://i.picsum.photos/id/13/300/300.jpg" alt="image"/>
...
</div>
完整js代码：
function isInViewport(el) {
const inBelow = el.getBoundingClientRect().top > window.innerHeight // 元素在屏幕下方的情况
const inAbove = el.getBoundingClientRect().bottom < 0 // 元素在屏幕上方的情况
const visible = getComputedStyle(el).display !== "none" // 元素display样式为none
return !inBelow && !inAbove && visible
}
var lazyLoad = (function(){
var isActive = false;// 节流，每200s触发一次
return function () {
if(isActive){ return }
isActive = true
setTimeout(function(){
//转换成数组
var lazyImgs = [].slice.call(document.querySelectorAll('img.lazy'));
lazyImgs.forEach(function (img) {
if(isInViewport(img)){
img.src = img.getAttribute('data-src');
img.classList.remove("lazy"); //移除已经加载好的
}
})
isActive = false
}, 200)
}
})();
//事件监听
document.addEventListener('DOMContentLoaded', function () {
lazyLoad(); //第一次加载首屏
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationchange', lazyLoad)//屏幕旋转事件
})
