如何在HTML中插入图片懒加载功能_HTML懒加载实现方案

技术教程
2025-10-31 13:34:02

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

如何在html中插入图片懒加载功能_html懒加载实现方案

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

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

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

只需在<img alt="如何在HTML中插入图片懒加载功能_HTML懒加载实现方案" >标签中添加loading="lazy"属性：

<img src="example.jpg" alt="示例图片" loading="lazy">

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

兼容性说明： Chrome 76+、Firefox 75+、Edge 79+ 等主流现代浏览器均支持。对于老旧浏览器，可结合J*aScript降级方案。

通过Intersection Observer实现自定义懒加载

如果需要更精细的控制，或者要支持老版本浏览器，可以使用J*aScript的Intersection Observer API来手动实现懒加载。

基本思路是：将真实的图片地址存放在data-src属性中，初始src使用占位图或透明小图。当图片元素进入视口时，再将data-src的值赋给src。

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

8 查看详情知识画家

示例代码：

@@##@@

J*aScript实现：

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）

在使用<picture></picture>标签做响应式适配时，也可以实现懒加载。虽然loading="lazy"可以直接加在<img class="lazy" src="placeholder.png" alt="懒加载图片">上，但要注意它只作用于内部的<img alt="如何在HTML中插入图片懒加载功能_HTML懒加载实现方案" >标签。

示例：

<picture>
  <source media="(max-width: 600px)" data-srcset="small.jpg">
  <source media="(max-width: 1200px)" data-srcset="medium.jpg">
  @@##@@
</picture>

注意：原生loading="lazy"不会读取data-srcset，因此如需延迟加载响应式资源，仍需用J*aScript统一处理data-src和data-srcset。

基本上就这些。优先推荐使用原生loading="lazy"，简单直接；对兼容性或功能有更高要求时，再采用Intersection Observer方案。关键是根据项目实际需求选择合适的方式。<img alt="如何在HTML中插入图片懒加载功能_HTML懒加载实现方案" >