一、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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

<!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>

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

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

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  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. Linux下Shell文件内容替换（sed）（转）

    sed -i 's/被替换的内容/要替换成的内容/g' file #-i为直接修改并保存 参考: http://blog.sina.com.cn/s/blog_7211cb9201019hgd.htm ...

  2. 【java】TreeMap/HashMap的循环迭代中 keySet和entrySet和forEach方式 + map的几种迭代方式

    参考链接:https://www.cnblogs.com/crazyacking/p/5573528.html ================================== java紫色代表迭 ...

  3. RecyclerView的滚动事件分析

    列表的滚动一般分为两种: 手指按下 -> 手指拖拽列表移动 -> 手指停止拖拽 -> 抬起手指 手指按下 -> 手指快速拖拽后抬起手指 -> 列表继续滚动 -> 停 ...

  4. selenium遇到不可编辑input和隐藏input如何赋值

    js = 'document.getElementsByName("m:csr_mt_gnccspjclfbxd:bmshldID")[0].type="text&quo ...

  5. C# 的概念

    1,C#-ASP.NET C# 的概念 2,Intro ASP.NET 一,基本概念: 1,C#--语言 microsoft 开发的纯面向对象的语言,是VS2005的主流开发语言. 语言的发展 C-- ...

  6. Linux命令之basename 命令

        用途 返回一个字符串参数的基本文件名称. 语法 basename String [ Suffix ] 描述 basename 命令读取 String 参数,删除以 /(斜杠) 结尾的前缀以及任 ...

  7. Esper epl语句实验

    基础代码见下,下文列举的实验都是在此程序基础上改动. all,snapshot,first String epl = "select * from appTable.win:time(5 s ...

  8. MYSQL 的optimize怎么用

    当对表有大量的增删改操作时,需要用optimize对表进行优化.可以减少空间与提高I/O性能,命令optimize table tablename;假如有foo表且存储引擎为MyISAM. mysql ...

  9. JAVA学习第十四课（接口：implements及其基本应用）

    接口: 我们知道抽象类中能够定义抽象方法,也能够定义非抽象方法.当一个抽象类中的方法都是抽象方法的时候,我们就能够定义还有一种表现方式:接口(interface),所以接口是一种特殊的抽象类 接口的出 ...

  10. Effective C++ 35，36，37

    35.使公有继承体现 "是一个" 的含义. 共同拥有继承意味着 "是一个".如  class B:public A. 说明类型B的每个对象都是一个类型A的对象, ...