图片懒加载的实现

图片懒加载是指在页面加载时，只加载可视区域内的图片，当滚动页面，将要出现在可视区域内的图片再进行加载，减少了页面的加载时间和带宽的占用，提升了用户体验。

实现图片懒加载的方法有很多种，以下是其中一种比较简单的实现方式：

1. 在HTML中将所有要进行懒加载的图片的src属性设置为一个占位符，比如data-src，将真正的图片URL保存在该标签的自定义属性中，如data-img="image.jpg"

<img src="placeholder.png" data-src="image.jpg">

1. 使用getBoundingClientRect()

   用于获取元素相对于视口的位置和大小信息,返回一个对象,包含元素的坐标、宽度、高度等属性

2. 获取所有类名为lazyImg的图片元素,遍历数组，判断是否进入了可视区域，如果进入了可视区域，就将data-src属性的值赋给src属性，从而触发图片加载;加载完成后移除改元素的data-src自定义属性,和lazyImg类名避免再次触发懒加载函数再次处理相同的元素,已经加载的图片不会再次被处理

    //定义一个节流阀
    let flg = true;
    let lazyImg = document.getElementsByClassName('lazyImg');
    let clientHeight = window.innerHeight;

    function lazyLoadingImg() {
        if (flg) {
            flg = false;
            setTimeout(() => {
                for (let item of lazyImg) {
                    //当item.getBoundingClientRect().top==clientHeight时,元素在视口有效区域的下边缘
                    //减100为了提前加载
                    if (item.getBoundingClientRect().top - 100 < clientHeight) {
                        item.src = item.getAttribute('data-src');
                        item.removeAttribute('data-src'); // 移除自定义属性
                        item.classList.remove('lazyImg'); // 移除类名
                    }
                }
                flg = true;
            }, 500);
        }

    }

    window.addEventListener('scroll', lazyLoadingImg)

1. 将lazyLoadingImg()函数绑定在window对象的scroll事件上，当滚动页面时，不断检查图片是否进入了可视区域，如果是则进行加载。

需要注意的是，在实现图片懒加载时，应该考虑到以下几点：

• 对于已经进入可视区域的图片，应该将data-src属性删除，避免重复加载。
• 只有当图片进入可视区域才进行加载
• 移除类名,避免再次触发懒加载函数时再次处理相同的元素。这样可以确保已经加载的图片不会再次被处理。
• 定义一个节流阀,减少触发频率