原生JS实现图片懒加载，不依赖任何第三方库

图片懒加载是网页性能优化非常基础的手段。当页面图片很多时，一次性加载全部图片会拖慢页面渲染。懒加载可以做到：图片进入可视区域之后才开始请求资源。

现在主流方案使用 IntersectionObserver，兼容性足够，代码简洁，相比传统scroll监听性能更好。

1、HTML结构写法

<!-- 注意：真实地址放入data-src，src放占位图 -->
<img class="lazy-img" src="placeholder.png" data-src="real-image.jpg" alt="图片">

2、完整JavaScript代码

document.addEventListener('DOMContentLoaded', function(){
    const lazyImages = document.querySelectorAll('.lazy-img');
    // 创建观察器
    const observer = new IntersectionObserver((entries)=>{
        entries.forEach(item=>{
            if(item.isIntersecting){
                const img = item.target;
                img.src = img.dataset.src;
                observer.unobserve(img); //加载完成停止监听
            }
        })
    });
    // 遍历监听所有图片
    lazyImages.forEach(img=>{
        observer.observe(img);
    })
})

3、简单CSS优化

.lazy-img {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.lazy-img.loaded {
    opacity: 1;
}

4、拓展优化思路

1. 可以设置rootMargin，提前预加载即将进入视口的图片；

2. 增加错误处理，图片加载失败显示备用图；

3. 同时支持background-image背景图片懒加载。

这套代码可以直接放在静态博客、企业官网使用，无需引入jQuery，轻量化无负担。