JavaScript新手必看！揭秘快速判断图片加载妙招

今儿告诉你们个挺好玩的事儿，用JavaScript如何快速判断图片是否加载完毕？你可能猜不到，其实没那么容易。虽然这个问题让不少高手头疼，不过别怕，这儿为你量身定制了个妙招，保准帮上你忙！

帮你揭开真相！我们有一个小家伙儿叫tag，用来选图片展示形式。但它可不在那儿等你开机上网，它躲在setTimeout函数里面忙着“拖延”与“脱机”。听起来好玩？但如果网速不给力，那么短短300毫秒根本撑不住加载完图片！到头来说是你搞定了图片，tag却抢先对浏览器宣布“你败！”，硬让用户重新加载图片，可这时Image其实已经挂好了

怎么样搞定这个？咱们只要利用一下img的onload属性，看瞧图片准备齐全没。这样一来，咱们就不用着急，舒舒服服地等待图都加载完了再来处理后面的事情。这种方法真心不错，简单好用，网络慢也不怕。

　　


  
图片丢失，请点击重新生成
js

说到这，加载图片哪有不在日常生活中遇到过？不过，大家要记住我这话，别不当回事儿。严重的时候真的挺让人烦燥的！所以，咱都得正视这个问题才行！

这事儿有点头疼哈？那咱们可得找解决办法咯！别忘了试试img的onload方法看图片是否都加载成功了！这样用户体验更好，而且咱们的程序也会更稳妥！

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)});

啥！？再说说这个大问题！要图片载入慢可就让用户受不了！所以咱就得重视起来！

告诉你，问题超级容易搞定，只需要给img加上个onload属性，就能随时了解图片有没有加载成功。这个方法真的厉害极了，客户满意，我们的软件也更稳定！别忘了！

是要问怎么检测图片有没有加载完成么？这可简单，用img 的onload 方法就行。别忘了我这段提醒！今天就聊到这儿。期待你们有所收获，多关注我们哈。有啥问题或意见都可以留言给我们！点赞和分享也是很好的互动形式！感谢你们！

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;
});