js图片懒加载

无图无真相，首先二话不说，点此查看效果（图片用的国外的，国内网络有可能会加载不出来）

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)//屏幕旋转事件
})