前端网站全局图片懒加载实现

1.首先替换掉整个项目的img标签src属性，以下是替换正则

From:
<img((.|\n)*?)src="(.*?)"((\s|\n)*?)

To:
<img$1data-src="$3"

目的是让所有img不加载图片以及绑定图片链接到(data-src)属性上面

2.全局加入以下js脚本

//替换可视范围内图片链接
const lazyLoadImages = () => {
    //找到所有包含data-src属性的img元素
    const images = document.querySelectorAll('img[data-src]');
    const windowHeight = window.innerHeight;
    images.forEach(img => {
        const rect = img.getBoundingClientRect();
        //判断元素是否在可视范围内
        if (rect.top < windowHeight && rect.bottom > 0) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
};
//监听dom加载完成
document.addEventListener("DOMContentLoaded", function () {
    console.log("DOMContentLoaded")
    //找到所有img标签
    const images = document.querySelectorAll('img');
    //默认显示加载图片
    images.forEach(img => {
        img.src = "/static/assets/svg/rect_unimg.svg"
    });
    // 监听 DOM以及class 变化
    const observer = new MutationObserver(lazyLoadImages);
    observer.observe(document.body, {
        childList: true, // 监听子节点的变化
        subtree: true,   // 监听整个子树的变化
        attributes: true,
        attributeFilter: ['class']
    });
    //监听窗口变化
    window.addEventListener('scroll', lazyLoadImages);
    window.addEventListener('resize', lazyLoadImages);
    //初始化替换
    lazyLoadImages();
});

如果存在页面或弹窗打开加了动画，class变化时，img元素还没进入可视范围内，导致图片没有加载，可延迟手动调用lazyLoadImages方法，进行替换图片链接