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

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。

一、load事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - load event</title>
</head>
<body>
    <p id="p1">loading...</p>
    <script type="text/javascript">
        img1.onload = function() {
            p1.innerHTML = 'loaded'
        }
    </script>
</body>
</html>

测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。

二、readystatechange事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - readystatechange event</title>
</head>
<body>
    <p id="p1">loading...</p>
    <script type="text/javascript">
        img1.onreadystatechange = function() {
            if(img1.readyState=="complete"||img1.readyState=="loaded"){
                p1.innerHTML = 'readystatechange:loaded'
            }
        }
    </script>
</body>
</html>

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

三、img的complete属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - complete attribute</title>
</head>
<body>
    <p id="p1">loading...</p>
    <script type="text/javascript">
        function imgLoad(img, callback) {
            var timer = setInterval(function() {
                if (img.complete) {
                    callback(img)
                    clearInterval(timer)
                }
            }, 50)
        }
        imgLoad(img1, function() {
            p1.innerHTML('加载完毕')
        })
    </script>
</body>
</html>

轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

JavaScript判断图片是否加载完成的三种方式的更多相关文章

  1. JavaScript判断图片是否加载完成的三种方式 (转)

    一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head>      ...

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

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> ...

  3. JavaScript实现判断图片是否加载完成的3种方法整理

    JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...

  4. JQuery的几种页面加载完执行三种方式

      jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...

  5. JavaScript判断图片是否加载完成

    一.load事件 <!DOCTYPE HTML><html> <head>     <meta charset="utf-8">   ...

  6. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  7. java加载配置文件的三种方式

    比如我们要加载db.properties文件 如图: 比如我们要加载source目录下的db.properties文件.就有以下几种方式 第一种是文件io流: public static void l ...

  8. javascript判断图片是否加载完成方法整理

    有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...

  9. easyui datagrid加载数据的三种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

随机推荐

  1. Ubuntu下忘记MySQL密码重设方法

    今天在做Python的实验,要用到MySQL数据库,但是密码是啥捏~~~果断重新设置密码啦啦啦 http://www.cnblogs.com/yuxc/archive/2012/07/25/26075 ...

  2. juqery 实现商城循环倒计时

    <html> <hand> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jqu ...

  3. shell text process code

     shell 命令处理文本: 1. 批量处理该目录下的文件,ls | while read l ; do echo $l ; done > b.txt 2. 批量处理文件的每一行 , cut - ...

  4. 使用js进行string和json之间转换的方法

    在数据传输过种中,json是以文本,即字符串的形式传递,字符串形似Json对象: var str1 = '{ "name": "Amy", "sex& ...

  5. 分页探究--Filter+JSTL

    最近卡了一个功能就是分页,查了很多资料,分页大概是两种类型:一种是把数据库的东西全部查出来然后放在session里,用list一页一页传到页面,这样的消耗比较大;另一种就是使用sql语句的limit来 ...

  6. windows7-PowerDesigner 15.1 的安装图解

    下载 PowerDesigner 15.1 的安装文件和破解文件 破解文件下载地址:http://pan.baidu.com/share/link?shareid=177873&uk=3626 ...

  7. ci查询数据库

    public function getUsers() { $this->load->database();//载入数据库 $users = $this->db->get(&qu ...

  8. easyUI增加视图分组的办法

    1.在JSP头文件中引入如下代码 <script type="text/javascript" src="${pageContext.request.context ...

  9. PL/SQL 中查询CLOB字段内容

    oracle中的clob类型字段不能直接显示出来,需要借助Oracle系统dbms_lob中substr方法处理,如select dbms_lob.substr(clobField) from tab ...

  10. 9月20日上午JavaScript函数

    函数 一.  函数定义 函数又叫方法,在程序里面函数是用来执行某些特定功能的代码.为了减少重复使用代码,可以把特定功能的代码做成函数,需要使用时拿出来调用.alert();就是一个很常见的.简单的函数 ...