图片预加载和懒加载

还没试过,先记录一下

🔹 一、懒加载(Lazy Load)

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

✅ 常用实现方案:

1. ✅ 原生支持 loading="lazy"(简单高效,现代浏览器支持好)

ini 复制代码
<img src="example.jpg" loading="lazy" alt="图片描述" />

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


2. ✅ 使用 IntersectionObserver API(可定制性强)

ini 复制代码
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:

ini 复制代码
<img data-src="example.jpg" alt="图片描述" />

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


3. ✅ 使用成熟库(如 lazysizes

ini 复制代码
<img data-src="example.jpg" class="lazyload" />
<script src="lazysizes.min.js"></script>

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


🔹 二、预加载(Preload / Prefetch)

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


✅ 常用方式:

ini 复制代码
<link rel="preload" href="important.jpg" as="image" />
  • 用于首屏即将使用的图片资源
  • as="image" 必须写,否则不会触发加载

ini 复制代码
<link rel="prefetch" href="next-page-bg.jpg" as="image" />
  • 浏览器在空闲时加载,适用于下一页面的图片等非关键资源

3. ✅ JavaScript 预加载

ini 复制代码
const img = new Image();
img.src = "future-use.jpg";
  • 在用户还未看到前就加载,用于滑动前、hover前的资源预热

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

如果你用的是 Vite 项目:

ini 复制代码
const images = import.meta.globEager('./assets/images/*.jpg');

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


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

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

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

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

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

相关推荐
ZhuAiQuan4 分钟前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown9 分钟前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh22 分钟前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥41 分钟前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球41 分钟前
css新特性
前端·css
Nicholas6843 分钟前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端
无羡仙1 小时前
React 状态更新:如何避免为嵌套数据写一长串 ...?
前端·react.js
TimelessHaze1 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae
jvxiao2 小时前
搭建个人博客系列--(4) 利用Github Actions自动构建博客
前端
袁煦丞2 小时前
SimpleMindMap私有部署团队脑力风暴:cpolar内网穿透实验室第401个成功挑战
前端·程序员·远程工作