17370845950

优先使用原生loading="lazy"属性实现图片懒加载，现代浏览器支持良好，语法简单；对于需兼容旧浏览器或复杂场景，可采用Intersection Observer API结合data-src实现自定义懒加载，灵活可控。

在网页开发中，图片懒加载（Lazy Loading）是一种优化性能的常用技术。它的核心思想是：当页面初次加载时，不立即加载所有图片，而是等到用户滚动到图片附近时才加载，从而减少初始请求量，加快首屏渲染速度。

使用原生HTML的loading属性实现懒加载

现代浏览器支持通过原生HTML属性loading="lazy"来实现图片懒加载，无需JavaScript即可完成，简单高效。

只需在标签中添加loading="lazy"属性：

浏览器会自动对设置了该属性的图片进行懒加载处理，尤其适用于长页面中位于下方的图片。

兼容性说明： 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方案。关键是根据项目实际需求选择合适的方式。