在网上有很多关于判断图片是否已经加载完毕的文章，但是有的浏览器并不适合，下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总，具体内容如下所示：

一.onload事件

通过监听图片的onload事件，可以判断图片是否已经加载完成，兼容所有的浏览器（w3c推荐方法），代码示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 方法一：图片已经下载完
document.getElementById('img1').onload = function(e){
e.stopPropagation();
alert(1);
}
</script>
</body>
</html>

二.判断img对象（DOM）的complete属性

当img加载完成之后，complete对象属性将变为true，代码示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 方法二：img的complate属性
var timer = setInterval(function(){
if (document.getElementById('img1').complete){
clearInterval(timer);
alert(1);
console.log(document.getElementById('img1').complete)
}
}, 10);
</script>
</body>
</html>

亲测该方法同样可兼容所有浏览器

三.onreadystatechange事件

在ie下，img对象与xhr对象一样具有onreadystatechange事件，可以通郭建廷该事件判断图片是否加载完成，代码示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
document.getElementById('img1').onreadystatechange = function() {
if(document.getElementById('img1').readyState=="complete"||document.getElementById('img1').readyState=="loaded"){
alert(1);
}
}
</script>
</body>
</html>

该方法仅在ie下可用

JavaScript判断图片是否已经加载完毕的方法汇总的更多相关文章

  1. JavaScript判断页面是否已经加载完毕

    做页面时经常会遇到当前页面加载完成后,执行某些初始化工作.这时候就要知道如何判断页面(包括IFRAME)已经加载完成,代码如下: < script language = "javasc ...

  2. js判断flash文件是否加载完毕

    轮询判断加载进度 img的加载完成有onload方法,一直不知道该怎么判断swf文件是否加载完毕了? 在应用中使用了轮询判断加载进度值PercentLoaded是否达到100,经测试,可以达到效果. ...

  3. [转]Javascript实现图片的预加载详解

    下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){ var newimages=[] var arr=(typeof arr!=" ...

  4. Javascript实现图片的预加载的完整实现

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作.今天我们将来实现一个完整 ...

  5. javaScript & jquery完美判断图片是否加载完毕

    好久没写东西了,正好最近因为工作需要,写了一个瀑布流异步加载的程序. 今天就不谈瀑布流,来谈一下关于load的问题. ----------------------------------------- ...

  6. jquery判断图片是否加载完毕

    来源: <http://www.2cto.com/kf/201409/331234.html> 利用图片没有加载完成的时候,宽高为0.我们很容易判断图片的一个加载情况.如下: 思路:判断图 ...

  7. js判断图片是否加载完毕

    附件: https://www.jb51.net/article/102385.htm 问题:  .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...

  8. JavaScript在A页面判断B页面加载完毕（iframe load）

    今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...

  9. Webbrowser控件判断网页加载完毕的简单方法 (转)

    摘自:http://blog.csdn.net/cometnet/article/details/5261192 一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,W ...

随机推荐

  1. FFmpeg命令：几种常见场景下的FFmpeg命令（摄像头采集推流，桌面屏幕录制推流、转流，拉流等等）

    前提: 首先你得有FFmpeg(ffmpeg官网快捷通道:http://ffmpeg.org/) 再者,推流你得有个流媒体服务,个人测试用小水管:rtmp://eguid.cc:1935/rtmp/t ...

  2. Hadoop——hive安装

    安装前先确保安装好MySQL,具体见hadoop_MySQL安装 1.下载hive(下载前先去spark官网看下sparkSQL支持到哪个版本的hive,本文hive版本为1.2.1) 2.解压到/u ...

  3. Redis实现求交集操作结果缓存的设计方案

    Redis的集合操作 实话说,Redis提供的集合操作是我选择它成为内存数据库的一个主要理由,它弥补了传统关系型数据库在这方面带来的复杂度,使得只需要简单的一个命令就可以完成一个复杂SQL任务,并且交 ...

  4. Java多线程运行机制的基本原理

    Java多线程运行机制的基本原理 进程和线程的区别 进程 进程是一个程序执行的实例,比如说我们打开10个IE浏览器窗口,那么就有10个进程开启.一个进程可以同时被运行若干次,进程是CPU进行资源分配和 ...

  5. selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

    转自:https://blog.csdn.net/xxj19950917/article/details/73002046

  6. html中NAME和ID区别

    html中NAME和ID区别 NAME 的最大作用就是可以与服务端进行交互.Struts2中要设NAME的属性才能在Action中取到值,ID取不到. id与name的作用,作为标签的标识符,基本上是 ...

  7. xgene：之ROC曲线、ctDNA、small-RNA seq、甲基化seq、单细胞DNA, mRNA

    灵敏度高 == 假阴性率低,即漏检率低,即有病人却没有发现出来的概率低. 用于判断:有一部分人患有一种疾病,某种检验方法可以在人群中检出多少个病人来. 特异性高 == 假阳性率低,即错把健康判定为病人 ...

  8. lvs squid相关

    http://zh.linuxvirtualserver.org/ 这几天在要对用户请求过来的post 的body内容进行处理,就具体了解了一下squid 处理post请求的具体流程,在这里具体分享一 ...

  9. Updatepanel 中使用 Timer 控件 失去焦点问题

    在Update Panel 中 如果使用timer 定时刷新数据,会造成textbox 或者其他控件的焦点丢失问题. 所以 text box 不能和timer 放在同一个Updatepanel 中. ...

  10. Gym - 101889E Enigma（数位填数+记忆化）

    https://cn.vjudge.net/problem/Gym-101889E 1??????????????????????????????? 2 10000000000000000000000 ...