图片预加载和懒加载

还没试过，先记录一下

🔹 一、懒加载（Lazy Load）

目的：页面加载时不立刻加载所有图片，只有当图片快进入可视区域时再加载。

✅ 常用实现方案：

1. ✅ 原生支持 loading="lazy"（简单高效，现代浏览器支持好）

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

优点 ：简单、无需引入库。
兼容性 ：Can I use loading lazy（除极旧版本外，主流浏览器都支持）

---

2. ✅ 使用 IntersectionObserver API（可定制性强）

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

HTML：

<img data-src="example.jpg" alt="图片描述" />

优点 ：更灵活，可用于动画触发、视频加载等。
兼容性：IE不支持，需要 polyfill（现代项目一般可放心使用）

---

3. ✅ 使用成熟库（如 lazysizes）

<img data-src="example.jpg" class="lazyload" />
<script src="lazysizes.min.js"></script>

适合场景：老项目或需要高度兼容时。

---

🔹 二、预加载（Preload / Prefetch）

目的：在用户"即将"需要某些图片时提前加载，避免用户点击或滑动时才开始下载图片造成卡顿。

---

✅ 常用方式：

1. ✅ HTML <link rel="preload">

<link rel="preload" href="important.jpg" as="image" />

• 用于首屏即将使用的图片资源
• as="image" 必须写，否则不会触发加载

---

2. ✅ HTML <link rel="prefetch">

<link rel="prefetch" href="next-page-bg.jpg" as="image" />

• 浏览器在空闲时加载，适用于下一页面的图片等非关键资源

---

3. ✅ JavaScript 预加载

const img = new Image();
img.src = "future-use.jpg";

• 在用户还未看到前就加载，用于滑动前、hover前的资源预热

---

4. ✅ import.meta.globEager()（Vite 项目 + 动态导入）

如果你用的是 Vite 项目：

const images = import.meta.globEager('./assets/images/*.jpg');

适合提前加载静态资源，但不适用于懒加载。

---

🔸 三、常见组合策略建议：

场景	建议做法
首屏大图	使用 <link rel="preload"> 或 img 直接加载
非首屏图	loading="lazy" 或 IntersectionObserver
即将进入视口	IntersectionObserver
下一个页面用到的图	<link rel="prefetch"> 或 JS 预加载
懒加载失败兜底	设置 onerror 事件 fallback

---

✅ 示例：结合懒加载和预加载

<!-- preload 首屏主图 -->
<link rel="preload" href="/img/banner.jpg" as="image" />

<!-- 懒加载其他图片 -->
<img data-src="/img/gallery1.jpg" alt="图1" class="lazyload" />

---