轮播图预加载必须用JS主动触发下载进缓存，推荐new Image()预载当前页及相邻共3张；需确保data-src与预载URL完全一致，避免重复请求和缓存失效。
轮播图预加载不是靠 loading="lazy" 或 display: none 实现的，它必须由 JS 主动触发下载并进浏览器缓存——否则切换时仍要白屏等待。
用 new Image() 预加载当前页及相邻图
这是最可控、兼容性最好、不依赖框架的方式。关键不是“把所有图都下完”，而是只预载用户最可能看到的 3 张：当前页 + 前一张 + 后一张。
- 先确保每张
<img>的真实 URL 存在data-src属性里，src初始为空或占位图 - 调用
preloadImage()时传入完全一致的 URL（含参数，如slide-2.jpg?v=202610），否则缓存不命中 - 移动端并发请求数通常为 6，一次别超过 3–4 个
new Image()，避免阻塞其他资源 - 不要在
img.onload里直接插入 DOM；预加载只是“下进缓存”，后续切换时再赋值img.src就能秒出
示例：
const preloadImage = (url) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`Failed to load ${url}`));
img.src = url; // 这行一执行，下载立即开始
});
};
// 初始化时预加载第 0、1、2 张
Promise.all([
preloadImage('slide-0.jpg'),
preloadImage('slide-1.jpg'),
preloadImage('slide-2.jpg')
]).then(() => console.log('相邻图已进缓存'));
<link rel="preload"> 只适合首屏固定图
它只能写死在 <head> 里，适用于 banner、logo 这类确定首屏必显的图，**不适合轮播图**——因为轮播图的“首屏图”取决于 JS 运行后的 currentIndex，而 <link rel="preload"> 在 HTML 解析阶段就发请求，此时 JS 还没执行。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 如果硬写
<link href="slide-0.jpg" rel="preload" as="image">，它只会预载第 0 张，且无法响应用户滑到第 5 张后动态预载第 4/6 张 -
href必须是静态字符串，不能是模板语法（如"slide-${i}.jpg"），否则会当字面量请求，大概率 404 - 加了
loading="lazy"再配rel="preload"是自相矛盾的，浏览器行为不可控
轮播切换后立刻触发新一批预加载
用户点“下一张”或自动轮播跳到第 5 张时，不能再等下一轮才预载——必须立刻发起对第 4、5、6 张的 new Image() 请求。
- 不要在
setInterval里统一预载，要和切换逻辑耦合：每次goToSlide(5)执行完，紧跟着preloadImage(...) - 避免重复预载：可加个
Set记录已预载过的 URL，防止同一张图被多次new Image() - 如果轮播图有 10+ 张，别在初始化时全预载——浪费带宽、拖慢首屏、还可能被浏览器限流降权
真正容易被忽略的是 URL 一致性：预加载用的 slide-3.jpg?ts=123，和最终切换时赋给 img.src 的必须完全一样，差一个参数、多一个斜杠，就等于没预载。
