CSS中如何实现优雅的图片懒加载与性能优化

/* 图片懒加载样式 */
img[lazy-src] {
    opacity: 0;
    transition: opacity 300ms;
}
img[lazy-src][loaded] {
    opacity: 1;
}
 
/* 图片懒加载脚本 */
<script>
document.addEventListener('DOMContentLoaded', function() {
    var lazyImages = [].slice.call(document.querySelectorAll('img[lazy-src]'));
 
    if ('IntersectionObserver' in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.getAttribute('lazy-src');
                    lazyImage.removeAttribute('lazy-src');
                    lazyImage.classList.add('loaded');
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
 
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // 降级方案：只加载可见的图片
        let nearBottom = 500; // 当距离底部500px时开始加载图片
        lazyImages.forEach(function(lazyImage) {
            setTimeout(function() {
                lazyImage.src = lazyImage.getAttribute('lazy-src');
                lazyImage.removeAttribute('lazy-src');
                lazyImage.classList.add('loaded');
            }, 200);
        });
    }
});
</script>

这段代码展示了如何使用IntersectionObserver实现图片懒加载，以及如何为不支持IntersectionObserver的浏览器提供一个简单的降级方案。代码中的img[lazy-src]选择器用于选择那些需要懒加载的图片，通过设置opacity: 0进行隐藏，然后在图片加载时逐渐提升不透明度，以实现平滑的用户体验。