js实现图片预加载
图片预加载的实现方法
图片预加载是提高网页性能的重要手段，通过提前加载图片资源，减少用户等待时间。以下是几种常见的实现方式：
使用Image对象
创建Image对象并设置src属性，浏览器会自动加载图片但不插入DOM。
const preloadImages = (urls) => {
urls.forEach(url => {
const img = new Image();
img.src = url;
});
};
// 使用示例
preloadImages([
'image1.jpg',
'image2.png',
'image3.webp'
]);利用CSS隐藏预加载
将图片插入DOM但隐藏显示，适用于少量关键图片。
function preloadWithCSS(urls) {
const container = document.createElement('div');
container.style.display = 'none';
document.body.appendChild(container);
urls.forEach(url => {
const img = document.createElement('img');
img.src = url;
container.appendChild(img);
});
}使用Promise实现异步预加载
通过Promise.all可以监控所有图片加载完成状态。
const preloadWithPromise = (urls) => {
return Promise.all(urls.map(url => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(url);
img.onerror = () => reject(url);
img.src = url;
});
}));
};
// 使用示例
preloadWithPromise(['img1.jpg', 'img2.jpg'])
.then(() => console.log('全部加载完成'))
.catch(err => console.log('加载失败:', err));结合懒加载的实现
对于长页面可以只预加载首屏内容，其他图片按需加载。
const lazyPreload = (selector = 'img[data-src]') => {
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
io.unobserve(img);
}
});
});
document.querySelectorAll(selector).forEach(img => {
io.observe(img);
});
};性能优化建议
预加载数量不宜过多，建议控制在10个以内 对重复调用的预加载应该做缓存处理 WebP格式通常比JPEG/PNG体积更小 考虑使用loading="lazy"原生属性作为降级方案
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">以上方法可根据实际场景组合使用，建议优先考虑Promise方案配合IntersectionObserver实现最佳性能。
