真要让长列表滚动顺滑、图片秒出，需在用户滚到前预加载后续几屏图片：用link rel="preload"预载固定关键图（如banner），或用new Image()按滚动进度动态预载2~3屏，控制并发≤4、去重、统一格式，并结合网络与设备动态调节。
长列表里的图片不能靠 loading="lazy" 解决“首屏卡顿”或“滚动闪白”，它只推迟加载，不提前准备。真要让滚动顺滑、图片秒出，得在用户还没滚到之前，就把后续几屏的图悄悄下进缓存——但必须控制节奏，否则压垮网络、拖慢首屏。
用 link rel="preload" 预载固定关键图
适用于列表顶部固定位置的图（比如 banner、分类头图、置顶推荐封面），这些图你确定一定会被看到，且路径静态可写。
-
as="image"必须显式声明，否则浏览器当普通 fetch 处理，不走图片解码和缓存策略 - 路径必须是绝对路径或基于 HTML 文件位置的准确相对路径，比如 HTML 在
/user/list.html，就别写./images/item1.jpg，改用/images/item1.jpg -
fetchpriority="high"在 Chrome 109+ 有效，能抢在其他资源前发请求；旧版忽略，无副作用 - 别在
href里写模板变量，如"/images/${id}.webp"，会当字面量请求，大概率 404
示例：
<link rel="preload" as="image" href="/images/banner.webp" fetchpriority="high"> <link rel="preload" as="image" href="/images/top-item.jpg">
用 new Image() 按滚动进度预加载后续项
这是长列表真正的主力方案：监听滚动，算出用户当前可视区域，再往后预取 2~3 屏的图片 URL，用 Image 对象逐个触发下载。
立即学习“前端免费学习笔记（深入）”；
- 顺序不能错：先绑定
onload/onerror，再赋值src；否则缓存命中的图会同步触发事件，回调直接跳过 - 检查
img.complete：为true说明已缓存，立刻执行成功逻辑，别等事件 - 并发数必须节制——浏览器通常只允许 6~8 个同域并发请求，建议一次最多预载 4 张，用 Promise.all 或队列控制
- 避免重复预载：维护一个
Set记录已发起请求的 URL，滚动抖动时不会反复触发
基础逻辑示意：
const preloadQueue = new Set();
const preloadImage = (url) => {
if (preloadQueue.has(url)) return;
preloadQueue.add(url);
const img = new Image();
img.onload = () => preloadQueue.delete(url);
img.onerror = () => preloadQueue.delete(url);
img.src = url;
};
// 滚动中计算 nextUrls，然后：
nextUrls.slice(0, 4).forEach(preloadImage);
WebP 预加载必须带 fallback 路径
如果你用 link rel="preload" 加了 .webp，但页面里 <img> 标签仍用 src=".jpg"，那预加载就白做了——缓存不复用，因为 MIME 类型和文件后缀不同。
- 要么统一用 WebP，并用
<picture>+<source type="image/webp">做降级 - 要么预加载时也按实际渲染路径来：如果最终
<img src="item.jpg">，那就 preloaditem.jpg，别 preloaditem.webp - 服务端开启
Vary: Accept头，确保 WebP 和 JPG 缓存分离，避免错乱
别碰 CSS background-image 伪预加载
用 background: url(...) no-repeat -9999px -9999px 这类技巧，在现代浏览器里既不可靠，也无法监听是否加载完成，还可能干扰 Lighthouse 评分。
- 它依赖浏览器对“不可见背景”的优化策略，Chrome/Firefox/Safari 行为不一致
- 图片仍参与初始渲染流水线，拖慢
DOMContentLoaded - 无法做错误重试、超时控制、并发限流，排查问题时毫无日志可查
真正难的不是“怎么写代码”，而是判断哪些图值得预载、预载多少张、什么时候停——这需要结合用户滚动速度、设备内存、网络类型（navigator.connection.effectiveType）动态调整，静态写死的预加载很容易好心办坏事。
