本文探讨如何利用JavaScript准确判断图片是否加载完成。针对使用setTimeout进行异步检测在网络慢时易失效的问题，文章对比了修改前后的代码，推荐使用img.onload和onerror事件监听，确保在图片加载成功或失败时能正确更新页面状态，提高前端交互的稳定性与用户体验。
JavaScript判断图片加载完成：从setTimeout到onload的优化方案
本文详细讲解了如何使用JavaScript检测图片是否加载完毕，通过具体的代码示例提供了清晰的参考，适合希望提升前端开发技能的读者阅读。
基于setTimeout的检测方案及其局限性
原方案中，我使用一个tag来控制样式的显示，但该逻辑被放置在setTimeout延时函数中，属于异步操作。设置300毫秒的延时旨在等待图片加载，然而在网络状况较差时，这一时长往往不足以让图片加载完成。若300毫秒后图片仍未加载完毕，程序会直接判定为false并提示用户重新获取图片，但实际上图片可能随后才返回。
因此，这种基于固定延时的做法缺乏灵活性。
初始代码实现如下：
HTML结构部分：
<div v-if="!it.sealTag"><br> <img :src="it.style"><br></div><br><div v-if="it.sealTag && it.isSys" style="margin-top:70px;">
<p >图片丢失，请点击<span @click="resetSign()">重新生成</span></p>
</div>js修改前的JavaScript逻辑：
this.list = res.data;
this.list.forEach((it) => {
it.style = catUrl()+'seal/pic/' + it.sealPath;
//判断sealpath能不能使用
let ImgObj = new Image(); //判断图片是否存在
ImgObj.src = catUrl()+'seal/pic/' + it.sealPath;
setTimeout(()=>{
if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
//false：sealpath不可用，true：sealPath可用
this.$set(it,'sealTag',true);
} else {
this.sealId = it.id;
this.$set(it,'sealTag',false);
}
},300)});之所以不能使用setTimeout()，是因为在网络缓慢的情况下，图片尚未加载完成，此时ImgObj.fileSize、ImgObj.width和ImgObj.height等属性均不存在，导致判断结果直接返回false。而当图片最终加载完成时，Vue页面早已渲染结束，无法及时响应。
基于onload事件的解决方案
解决方案
此时，我们可以利用img的onload事件来判断图片是否加载完成。
修改后的JavaScript逻辑：
this.list = res.data;
this.list.forEach((it) => {
//判断sealpath能不能使用
let ImgObj = new Image();
//判断图片是否存在
ImgObj.onload = () => {
if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { // 判断图片的sealpath能不能正常显示图片
// sealTag:false 不显示 重新生成 的提示
this.$set(it,'sealTag',false);
}
}
// sealTag:true 要显示 重新生成 的提示
ImgObj.onerror = () => {
this.sealId = it.id;
this.$set(it,'sealTag',true);
}
it.style = catUrl()+'seal/pic/' + it.sealPath;
ImgObj.src = catUrl()+'seal/pic/' + it.sealPath;
});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。