网站图片懒加载实现方案

实现方式对比：

方案	优点	缺点	适用场景
原生loading="lazy"	无需JS，浏览器原生支持	兼容性要求Chrome 77+	现代浏览器项目
Intersection Observer	精准控制，高性能	需要polyfill兼容旧浏览器	复杂滚动交互场景
jQuery Lazy插件	简单易用	依赖jQuery	传统jQuery项目
滚动监听scroll事件	兼容性好	性能较差	已淘汰，不推荐使用

Intersection Observer标准实现：

javascript

const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target img.src = img.dataset.src observer.unobserve(img) } }) }, {threshold: 0.1}) document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img) })

优化建议：