当前位置：首页 > 文章列表 > 文章 > 前端 > 轮播图快速加载技巧分享

轮播图快速加载技巧分享

2026-02-07 09:37:07 0浏览收藏

轮播图图片没加载完就自动播放？用 `loading="lazy"` 反而更慢

浏览器原生懒加载对轮播图第一张图无效，且可能阻塞 DOMContentLoaded。轮播图首屏必须立即可见，loading="lazy" 会延迟首图解码，造成白屏或闪动。

首图务必用直接写死，不加 loading 属性
非首图（第2张起）可设 loading="lazy"，但需配合 decoding="async" 避免主线程阻塞解码
所有轮播图标签必须带 width 和 height 属性，防止布局偏移（CLS）

用 `IntersectionObserver` 替代定时器预加载下一张图

传统 setInterval 轮播在页面不可见时仍消耗 CPU，且无法感知用户是否真正在看。改用 IntersectionObserver + 显式预加载，只在轮播容器进入视口前 200px 就触发下一张图的 fetch() 或 new Image().src。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const nextIndex = (currentIndex + 1) % slides.length;
      const nextImg = slides[nextIndex].querySelector('img');
      if (nextImg && !nextImg.complete) {
        const preload = new Image();
        preload.src = nextImg.dataset.src || nextImg.src;
      }
    }
  });
}, { rootMargin: '200px' });
observer.observe(carouselContainer);