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

这篇文章主要介绍了如何基于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;
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现判断图片是否加载完成的方法分析

    本文实例讲述了JS实现判断图片是否加载完成的方法.分享给大家供大家参考,具体如下: 1.onload事件 <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <img src="images/background.png"> <p>loading...</p> <script type=&qu

  • 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用js中Image对象,通过 onload 事件和 onreadystatechange 来进行判断. (1)第一中方法,通过onload事件,比如: 复制代码 代码如下: <script type="text/javascript">var obj=n

  • js 判断图片是否加载完以及实现图片的预下载

    创建一个Image对象,实现图片的预下载,如果图片已经存在于浏览器缓存,直接调用回调函数,使用onload事件可以判断图片是否加载完成 function loadImage(url, callback) { var img = new Image(); //创建一个Image对象,实现图片的预下载 img.src = url; if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 callback.call(img); return; // 直接返回,不用再

  • JS判断图片是否加载完成方法汇总(最新版)

    JS判断图片是否加载完成方法汇总(最新版)

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧. 一.load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 二.jquery方法 <script

  • JavaScript判断图片是否已经加载完毕的方法汇总

    在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • js判断背景图片是否加载成功使用img的width实现

    非背景图片可以用img的onerror 来判断,但是背景图片呢,刚无意中发现一个方法,目测可行,但不确定是否始终可行. 复制代码 代码如下: var img=new Image(); img.src="图片地址"; if(img.width==0){//表示图片加载失败了} else{//成功了} 这方法一般情况下可行,但是为测试过图片很大或者加载速度很慢的时候是否可行.

  • js或者jquery判断图片是否加载完成实现代码

    网页中有时候需要获得图片的宽度和高度,来定义某些大小,可是这个是需要从服务端请求图片,下载到本地才能够得到的,有些js或者jquery代码在还没有加载完图片时就执行了.怎么办呢? jquery提供一个方法: 复制代码 代码如下: 01.$("").load(function(){...}); 其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是: 用js的onload方法: 复制代码 代

  • 使用JavaScript判断图片是否加载完成的三种实现方式

    使用JavaScript判断图片是否加载完成的三种实现方式

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src=&

  • JavaScript & jQuery完美判断图片是否加载完毕

    众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求.在服务端生成item列表后,通过 js append到相应的div里边. 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端. 例如我的图片地址: http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg 而图片下载到本地是需要一定时间的(网速快的路过).当图片还没有下载完的时候,使用js获取到元素的宽高将会是0. 有的同学说了我

  • js判断图片加载完成后获取图片实际宽高的方法

    本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

随机推荐