如何通过HTML与JavaScript实现网页媒体资源懒加载以提升加载速度

一、原生HTML实现媒体延迟加载 #

现代浏览器已支持原生延迟加载，无需额外JS即可实现：

• 图片：给<img>标签添加loading="lazy"属性，浏览器会自动在图片进入视口时才发起加载请求

  <img src="image.jpg" loading="lazy" alt="图片描述">
  

• 视频：对非自动播放的视频，可结合poster封面图+data-src暂存视频地址，配合原生懒加载（部分浏览器支持）；或仅加载封面，点击后再加载视频源：

  <video loading="lazy" poster="video-cover.jpg" controls>
    <source data-src="video.mp4" type="video/mp4">
  </video>
  

二、JavaScript自定义懒加载（兼容旧浏览器） #

如果需要兼容不支持原生loading="lazy"的浏览器，可通过Intersection Observer API实现高效懒加载：

1. 先给媒体元素用data-src替代src，标记懒加载类：

   <img data-src="image.jpg" class="lazy-img" alt="图片描述">
   <video class="lazy-video" poster="cover.jpg" controls>
     <source data-src="video.mp4" type="video/mp4">
   </video>
   

2. 编写监听逻辑：

   const lazyObserver = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         const target = entry.target;
         // 处理图片
         if (target.tagName === 'IMG') {
           target.src = target.dataset.src;
           target.classList.remove('lazy-img');
         }
         // 处理视频
         if (target.tagName === 'VIDEO') {
           const source = target.querySelector('source');
           source.src = source.dataset.src;
           target.load();
           target.classList.remove('lazy-video');
         }
         lazyObserver.unobserve(target);
       }
     });
   });
   
   // 绑定所有懒加载元素
   document.querySelectorAll('.lazy-img, .lazy-video').forEach(el => {
     lazyObserver.observe(el);
   });
   

   这种方式比监听scroll事件性能更优，不会频繁触发回调。

三、其他核心优化手段 #

• 媒体格式与压缩：优先使用WebP、AVIF等高效图片格式，视频转成H.265/AV1格式；用工具批量压缩媒体文件，在不损失视觉清晰度的前提下缩小体积
• 响应式媒体：用<picture>标签为不同屏幕尺寸提供适配的图片，避免小屏加载大图：

  <picture>
    <source media="(max-width: 600px)" srcset="small-image.webp">
    <source media="(max-width: 1200px)" srcset="medium-image.webp">
    <img src="large-image.webp" loading="lazy" alt="图片描述">
  </picture>
  

• 缓存策略：给媒体文件设置Cache-Control等HTTP缓存头，让浏览器长期缓存已加载的资源，避免重复请求
• CDN托管：将媒体文件部署到CDN，利用边缘节点就近分发，降低加载延迟

内容的提问来源于stack exchange，提问作者allCodeBreaker