预加载图片需在用户滑动前主动触发请求：轮播图初始化时加载当前及相邻页，切换后立即更新；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 （即距视口顶部 1.5 倍高度内）时触发预加载
• 预加载后标记 data-prefetched="true"，防止重复请求
• 别把 display: none 或 visibility: hidden 当预加载手段——部分浏览器会延迟 eager 加载，直到元素进入渲染流

真正难的不是写几行 new Image()，而是判断「哪张图值得预」和「什么时候最稳」：预早了浪费带宽，预晚了没意义，路径不一致直接双倍请求。这些细节不验证 Network 面板，很容易以为“写了就生效”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！