js判断图片是否加载完成

在JavaScript中，可以通过多种方式判断图片是否加载完成，以下是几种常用方法：

1. 使用onload事件const img = new Image(); img.src = 'image.jpg'; // 图片加载完成时触发 img.onload = function() { console.log('图片加载完成'); }; // 图片加载失败时触发 img.onerror = function() { console.log('图片加载失败'); };
2. 检查complete属性 对于已经存在于DOM中的图片，可以直接检查其complete属性：const img = document.getElementById('myImage'); if (img.complete) { console.log('图片已加载完成'); } else { img.onload = function() { console.log('图片加载完成'); }; }
3. 使用addEventListener监听加载事件const img = document.createElement('img'); img.src = 'test.jpg'; img.addEventListener('load', function() { console.log('图片加载完成'); }); img.addEventListener('error', function() { console.log('图片加载失败'); }); document.body.appendChild(img);
4. 对于多个图片的加载判断 如果需要等待多张图片全部加载完成，可以使用Promise：function loadImage(src) { return new Promise((resolve, reject) => { const img = new Image(); img.src = src; img.onload = () => resolve(img); img.onerror = () => reject(new Error(`无法加载图片: ${src}`)); }); } // 加载多张图片 const imageSources = ['img1.jpg', 'img2.jpg', 'img3.jpg']; Promise.all(imageSources.map(src => loadImage(src))) .then(images => { console.log('所有图片加载完成'); // 处理加载完成的图片 }) .catch(error => { console.error('图片加载失败:', error); });

这些方法可以根据具体场景选择使用，基本原理都是通过监听图片的加载事件或检查加载状态来判断图片是否加载完成。