在网上有很多关于判断图片是否已经加载完毕的文章，但是有的浏览器并不适合，下面小编给大家分享一些有关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. Enum定义位域， 即可以通过位操作来产生未命名的值

    通过FlagsAttribute可以实现. // A bit field or flag enumeration of harvesting seasons. [Flags] public enum ...

  2. POJ1195(二维树状数组)

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 17176   Accepted: 7920 De ...

  3. SpringMVC之二：配置 Spring MVC

    Servlet 3.0规范在2009年12月份就发布了,因此很有可能你会将应用部署到支持Servlet 3.0的Servlet容器之中,如tomcat7.0及以上.在Servlet 3 规范中,可以使 ...

  4. MySql介绍及优化（1）

    mysql 数据库 1.是关系型数据库: 2.体积小.支持多处理器.开源.免费 3.在 Internet 中小型网站中的使用率尤其高 mysql 数据库开发常见问题及优化 一.库表设计 1.1 引擎选 ...

  5. 关于REST的一些想法

    REST and RESTful 最近入手了REST,谈谈自己的体会. 所谓REST, 我觉得是一种网址的设计风格.过去我们用Struts 或Spring MVC 时从来没有考虑过URL的设计风格.所 ...

  6. g2o中setparameterid(0,0)方法

    其中两个参数的含义: 第二个参数是优化器内添加的参数的id.当你调用addEdge来添加这条边时,会根据第二个参数的id,把相应的参数地址给边,以后边内的成员函数,就根据第一个参数,拿到这个地址.

  7. hdu 4123 Bob’s Race (dfs树上最远距离+RMQ)

    C - Bob’s Race Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Subm ...

  8. 打包python文件为exe文件（PyInstaller工具使用方法）

    最近做的新浪微博爬虫程序,打算打包成.exe软件以方便使用,网上找到一个很好的打包工具pyinstaller,这里记录一下打包的方法. 一.下载pyinstaller 我使用的版本为PyInstall ...

  9. Spring入门第二十一课

    切面优先级 先看代码: package logan.study.aop.impl; public interface ArithmeticCalculator { int add(int i, int ...

  10. 分类---Logistic Regression

    一 概述 Logistic Regression的三个步骤 现在对为什么不使用均方误差进行分析(步骤二的) 由上图可以看出,当距离目标很远时,均方误差移动速率也很慢,不容易得到好的结果. Discri ...