优先使用原生loading="lazy"属性实现图片懒加载，现代浏览器支持良好，语法简单；对于需兼容旧浏览器或复杂场景，可采用Intersection Observer API结合data-src实现自定义懒加载，灵活可控。
在网页开发中，图片懒加载（Lazy Loading）是一种优化性能的常用技术。它的核心思想是：当页面初次加载时，不立即加载所有图片，而是等到用户滚动到图片附近时才加载，从而减少初始请求量，加快首屏渲染速度。
使用原生HTML的loading属性实现懒加载
现代浏览器支持通过原生HTML属性loading="lazy"来实现图片懒加载，无需JavaScript即可完成，简单高效。
只需在
立即学习“前端免费学习笔记（深入）”；
浏览器会自动对设置了该属性的图片进行懒加载处理，尤其适用于长页面中位于下方的图片。
兼容性说明： Chrome 76+、Firefox 75+、Edge 79+ 等主流现代浏览器均支持。对于老旧浏览器，可结合JavaScript降级方案。
通过Intersection Observer实现自定义懒加载
如果需要更精细的控制，或者要支持老版本浏览器，可以使用JavaScript的Intersection Observer API来手动实现懒加载。
基本思路是：将真实的图片地址存放在data-src属性中，初始src使用占位图或透明小图。当图片元素进入视口时，再将data-src的值赋给src。
示例代码：
@@##@@
JavaScript实现：
const lazyImages = document.querySelectorAll('.lazy');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img);
}
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
这种方式灵活可控，适合复杂场景，比如配合淡入动画、响应式图片切换等。
为响应式图片添加懒加载（picture + lazy）
在使用loading="lazy"可以直接加在
示例：
@@##@@
注意：原生loading="lazy"不会读取data-srcset，因此如需延迟加载响应式资源，仍需用JavaScript统一处理data-src和data-srcset。
基本上就这些。优先推荐使用原生loading="lazy"，简单直接；对兼容性或功能有更高要求时，再采用Intersection Observer方案。关键是根据项目实际需求选择合适的方式。
