如何基于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 相关文章推荐
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Sort()函数的多种用法
Mar 20 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
JavaScript实现简单日历效果
Sep 11 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
基于php判断客户端类型
2016/10/14 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
《挑山工》的教学反思
2014/02/16 职场文书
不错的求职信范文
2014/07/20 职场文书
万能检讨书2000字
2014/10/17 职场文书
三八妇女节致辞
2015/07/31 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
Python面试不修改数组找出重复的数字
2022/05/20 Python