预加载图片需在用户滑动前主动触发请求：轮播图初始化时加载当前及相邻页，切换后立即更新；hover 或 touchstart 时按需预加载；滚动临界点设为距视口顶部1.5倍高度，配合节流与去重标记。
用户滑动前预加载图片，本质是预测用户行为并提前触发请求——不能靠 loading="lazy"，也不能等滚动事件触发后再开始。核心是：在用户大概率滑动的「前一刻」，用 JS 主动发起图片下载，并确保浏览器能复用缓存。
轮播图切换前预加载相邻图
轮播图是最典型的滑动场景。初始化时只加载当前页（currentIndex）、上一页（currentIndex - 1）、下一页（currentIndex + 1）三张图；每次切换后，立刻重新计算并预加载新的相邻图。
- 用
new Image()发起请求，不是改src到隐藏<img>标签里 - 必须先绑定
onload/onerror，再赋值src，否则缓存命中时回调不执行 - 检查
img.complete === true，为真说明已缓存，可立即走成功逻辑 - 并发控制：一次最多预加载 4 张，避免挤占首屏资源（浏览器同域并发通常只有 6–8 个）
鼠标悬停时预加载下一张图
适用于卡片列表、商品格子、导航菜单等 hover 即可能跳转或展开的区域。不是“一进页面就全拉”，而是监听 mouseenter 后才触发。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每个 hover 元素绑定独立的预加载逻辑，避免重复触发（可用
data-preloaded="true"标记防重） - URL 必须和后续真实使用的
<img src>完全一致（含大小写、query 参数、CDN 域名），否则预加载白做 - 慎用
fetchpriority="high"：它只对<link rel="preload">有效，JS 创建的Image对象不支持该优先级控制 - 移动端无 hover，需 fallback 到
touchstart或点击前 300ms 触发
滚动临界点提前触发（非 lazy 加载）
如果页面有长列表或瀑布流，想在用户快滑到某区域前就预加载图，不能依赖 loading="lazy" 的自动机制——它只会推迟，不会提前。得自己算临界距离。
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll事件，但加节流（如requestIdleCallback或 100ms 间隔），避免频繁计算 - 对目标
<img>元素调用getBoundingClientRect()，当top < window.innerHeight * 1.5（即距视口顶部 1.5 倍高度内）时触发预加载 - 预加载后标记
data-prefetched="true"，防止重复请求 - 别把
display: none或visibility: hidden当预加载手段——部分浏览器会延迟 eager 加载，直到元素进入渲染流
真正难的不是写几行 new Image()，而是判断「哪张图值得预」和「什么时候最稳」：预早了浪费带宽，预晚了没意义，路径不一致直接双倍请求。这些细节不验证 Network 面板，很容易以为“写了就生效”。
