判断img是否加载完成

经常用到判断某个img是否加载完成,然后执行一些事件

function imgLoad(img,callback){  
    img.complete ? callback() : img.onload = callback;  
}     

 


在某些浏览器下面,img加载完成之后, complete的值会变成 false.

所以要继续判断 readyState 状态,才能准确知道img是否onload

function imgLoad(img,callback){  
    img.complete || img.readyState == 'loading' || img.readyState == 'complete' ? callback() : img.onload = callback;  
}
### JavaScript 判断图片加载是否成功的解决方案 在 JavaScript 中,可以通过监听 `img` 元素的 `onload` 和 `onerror` 事件来判断图片是否成功加载。以下是一个完整的实现示例: ```javascript function checkImageLoad(src) { return new Promise((resolve, reject) => { const img = new Image(); img.src = src; img.onload = () => resolve(true); // 图片加载成功 img.onerror = () => reject(false); // 图片加载失败 }); } // 使用示例 checkImageLoad('https://example.com/image.jpg') .then(() => console.log('图片加载成功')) .catch(() => console.log('图片加载失败')); ``` 上述代码通过创建一个 `Image` 对象,并为其设置 `src` 属性,然后监听 `onload` 和 `onerror` 事件来判断图片加载的状态[^5]。如果图片成功加载,则触发 `onload` 事件并返回成功状态;如果图片加载失败,则触发 `onerror` 事件并返回失败状态。 此外,还可以结合 `Promise` 来异步处理图片加载结果,从而更方便地与其他异步操作集成。 ### 注意事项 - 如果需要检查多张图片的加载状态,可以将上述函数封装到一个循环中,并使用 `Promise.all` 来等待所有图片加载完成。 - 确保图片的 URL 是有效的,并且服务器支持跨域请求(如果图片托管在不同的域名下)[^6]。 ```javascript function checkImagesLoad(sources) { return Promise.all(sources.map(src => checkImageLoad(src))); } // 使用示例 checkImagesLoad(['https://example.com/image1.jpg', 'https://example.com/image2.jpg']) .then(results => console.log('所有图片加载完成:', results)) .catch(error => console.log('部分图片加载失败:', error)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值