图片预加载通过javascript异步编程提前下载资源，用promise封装image事件实现统一状态管理，结合intersectionobserver实现懒加载协同，支持并发控制、进度反馈与缓存/cors处理。
图片预加载的核心是让浏览器在用户真正需要前就提前下载图片资源，而 JavaScript 异步编程正是实现这一目标的关键支撑。它避免阻塞主线程，确保页面交互流畅，同时精准控制加载时机与状态反馈。
利用 Promise 封装图片加载过程
原生 Image 对象的 onload 和 onerror 是回调式 API，直接使用易导致回调嵌套或状态管理混乱。用 Promise 包装后，可统一处理成功与失败，并支持 async/await 或链式调用。
示例：
function preloadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`Failed to load: ${src}`));
img.src = src;
});
}
// 使用示例
async function loadGallery() {
try {
const imgs = await Promise.all([
preloadImage('/a.jpg'),
preloadImage('/b.jpg'),
preloadImage('/c.jpg')
]);
console.log('All images loaded', imgs);
} catch (err) {
console.error(err.message);
}
}
结合 IntersectionObserver 实现懒加载+预加载协同
纯预加载可能浪费带宽，而懒加载又可能造成滚动时“闪白”。二者结合更合理：对即将进入视口的图片提前触发预加载，既节省资源又提升感知性能。
关键点：
- 监听目标元素（如
<img>）进入临界区域（比如距视口顶部 300px） - 触发
preloadImage()，加载完成后将data-src赋给src - 加载完成即取消观察，避免重复触发
批量预加载 + 进度控制与降级策略
多图场景下需考虑并发限制、失败重试和用户体验反馈。
建议做法：
- 用
Promise.allSettled()替代Promise.all()，单张失败不影响整体流程 - 限制并发数（如每次最多加载 3 张），通过队列 + 递归或 async/await 控制节奏
- 提供加载进度（如已加载 / 总数），失败时尝试降级 URL（如 WebP → JPEG）或占位图
- 设置超时（如 10 秒未响应则 reject），防止卡死
注意缓存与跨域问题
预加载的图片仍受浏览器缓存机制影响，但需主动规避潜在陷阱：
- 服务端应正确返回
Cache-Control头，避免重复请求；也可在 URL 后加时间戳或 hash 做缓存穿透（慎用） - 若图片来自跨域 CDN，
Image对象需设置crossOrigin = "anonymous"，否则部分浏览器无法读取尺寸或触发 onload - 预加载本身不触发 CORS 预检，但后续在
<canvas></canvas>中使用可能受限，需服务端配合
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
