如何基于JavaScript判断图片是否加载完成


Posted in Javascript onDecember 28, 2019

这篇文章主要介绍了如何基于JavaScript判断图片是否加载完成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这里我用了一个tag来判断显示哪个样式,但是tag是写在了setTimeOut里面的,是一个延时函数,异步的操作。延时300ms的目的就是为了等待图片加载出来,但是当网络慢的时候是满足不了的。网络慢图片没有加载出来300ms之后就会直接走入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

js修改前:

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页面早就渲染完了。

解决办法

此时用img的onload方法判断图片是否已经加载完成。

js修改后:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
浅谈javascript错误处理
Aug 11 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 #Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 #Javascript
Vue中axios拦截器如何单独配置token
Dec 27 #Javascript
JavaScript获取当前url路径过程解析
Dec 27 #Javascript
前端开发之便利店收银系统代码
Dec 27 #Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 #Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 #Javascript
You might like
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
javascript 函数使用说明
2010/04/07 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
球队口号
2014/06/18 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2014年除四害工作总结
2014/12/06 职场文书
大学四年个人总结
2015/03/03 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python