js实现图片加载
使用Image对象加载图片
通过JavaScript的Image对象可以动态加载图片，适用于需要预加载或动态插入图片的场景。
const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
console.log('图片加载完成');
document.body.appendChild(img);
};
img.onerror = function() {
console.error('图片加载失败');
};监听图片加载状态
通过addEventListener监听图片的加载和错误事件，适用于需要更灵活事件处理的场景。
const img = document.createElement('img');
img.addEventListener('load', () => {
console.log('图片加载成功');
});
img.addEventListener('error', () => {
console.log('图片加载失败');
});
img.src = 'path/to/image.jpg';
document.body.appendChild(img);批量预加载多张图片
通过数组和Promise实现多张图片的预加载，适用于需要提前缓存资源的场景。
function loadImages(urls) {
return Promise.all(
urls.map(url => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = url;
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`加载失败: ${url}`));
});
})
);
}
loadImages(['image1.jpg', 'image2.jpg'])
.then(images => {
images.forEach(img => document.body.appendChild(img));
})
.catch(error => console.error(error));懒加载图片（Intersection Observer API）
通过IntersectionObserver实现图片懒加载，适用于长页面中优化性能的场景。
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));图片加载超时处理
通过setTimeout实现图片加载超时控制，适用于网络不稳定的场景。
function loadImageWithTimeout(url, timeout) {
return new Promise((resolve, reject) => {
const img = new Image();
const timer = setTimeout(() => {
reject(new Error('图片加载超时'));
}, timeout);
img.onload = () => {
clearTimeout(timer);
resolve(img);
};
img.onerror = () => {
clearTimeout(timer);
reject(new Error('图片加载失败'));
};
img.src = url;
});
}
loadImageWithTimeout('path/to/image.jpg', 5000)
.then(img => document.body.appendChild(img))
.catch(error => console.error(error));动态修改图片源
通过修改src属性实现图片的动态切换，适用于需要根据条件更新图片的场景。
const img = document.getElementById('myImage');
img.src = 'new-image.jpg';
img.onload = () => console.log('新图片加载完成');
