js实现图片预加载
实现图片预加载的 JavaScript 方法
使用 Image 对象预加载
创建一个 Image 对象并设置其 src 属性，浏览器会自动缓存加载的图片资源。可以通过监听 onload 和 onerror 事件判断加载状态。
function preloadImage(url) {
const img = new Image();
img.src = url;
img.onload = () => console.log(`Loaded: ${url}`);
img.onerror = () => console.error(`Failed: ${url}`);
}
// 示例
preloadImage('https://example.com/image.jpg');批量预加载多张图片
通过数组存储图片 URL，循环调用预加载函数。
const imageUrls = [
'https://example.com/image1.jpg',
'https://example.com/image2.png'
];
imageUrls.forEach(url => preloadImage(url));使用 Promise 优化异步加载
结合 Promise 实现更可控的异步加载逻辑，支持链式调用或 async/await。
function preloadWithPromise(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = url;
img.onload = () => resolve(url);
img.onerror = () => reject(url);
});
}
// 示例用法
Promise.all([
preloadWithPromise('https://example.com/image1.jpg'),
preloadWithPromise('https://example.com/image2.png')
])
.then(() => console.log('All images loaded'))
.catch(err => console.error(`Error loading: ${err}`));兼容性注意事项
- 现代浏览器均支持
Image对象，无需额外兼容处理。 - 若需支持更早版本（如 IE9 以下），可通过
document.createElement('img')替代new Image()。
性能优化建议
- 避免一次性加载过多图片，可分批次或按需加载。
- 对动态生成的图片 URL，确保先预加载再使用。
