在网上有很多关于判断图片是否已经加载完毕的文章，但是有的浏览器并不适合，下面小编给大家分享一些有关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. 并查集基础 模板题 hdu1232 畅通工程

    模板题 引入并查集——一则有趣的故事 为了解释并查集的原理,我将举一个更有趣的例子.话说江湖上散落着各式各样的大侠,有上千个之多.他们没有什么正当职业,整天背着剑在外面走来走去,碰到和自己不是一路人的 ...

  2. 数论 最简分数 Farey序列求最简分数+POJ3374

    法雷数列 定义和定理 定义一: 最简分数(也称既约分数或不可约分数).若p,q的最大公约数是1,我们称分数p/q是最简分数. 定义二: 真分数,若p,q是正整数,0<p/q<1, 我们说p ...

  3. CF-828B

    B. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. 实验楼之Linux快捷、用户及文件权限、文件查看

    实验二 知识点1:通常不是直接与系统打交道,而是通过一个叫做Shell的中间程序. shell即是用户交互的界面,又是控制系统的脚本语言.常用的有bash. zsh, ksh, csh, 命令行模式: ...

  5. 一个工程多个Target

    当我们同一个工程需要在不同情形下编译打包,比如打个人包.企业包的时候,其中可能有一些细小的差别,又不想每次都先修改再打包的时候,我们可以通过创建多个Target来实现. 1.copy原有Target ...

  6. Xilinx SDSoc 加载opencv库

    Xilinx SDSoc 加载opencv库需要下载两个文件 xfopencv 和 Revision Platform, Revision Platform需要和具体的开发板型号对应,我用的是zcu1 ...

  7. UOJ #32. 【UR #2】跳蚤公路【Floydbellman-ford】

    首先看这个范围很夸张但是其实有限制的也就在1e18*n范围里(走完一圈的边权),然后限制一定是有负环 用Floyd传递闭包,然后设f[i][j][k]为从1走了i步到j并且有k个x的最短路,用B-F处 ...

  8. IT兄弟连 JavaWeb教程 AJAX常见问题

    1  中文乱码问题 ●  POST提交乱码 乱码原因:所有浏览器对Ajax请求参数都使用UTF-8进行编码,而服务器默认使用ISO-8859-1去解码,所以产生乱码. 解决方法:在服务器接收请求参数前 ...

  9. Java IO 输入和输出流

    数据流是指一组有顺序的,有起点和终点的字节集合. 最初的版本中,java.io 包中的流只有普通的字节流,即以 byte 为基本处理单位的流.字节流用来读写 8 位的数据,由于不会对数据做任何转换,因 ...

  10. Nacos深入浅出（三）

    EventDispatcher.fireEvent(new ConfigDataChangeEvent(true, dataId, group, tenant, time.getTime())); 跟 ...