zoukankan      html  css  js  c++  java
  • JavaScript判断图片是否加载完成的三种方式

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

  • 相关阅读:
    R dataframe 筛选
    R dataframe 统计每行中大于某个值的列的数量
    参考基因组
    C++/CLI入门系列 第二篇:封装C++ dll库,提供接口给C#调用
    C++/CLI入门系列 第一篇:HelloWorld
    用C++/CLI搭建C++和C#之间的桥梁
    C++ CLI简介(什么是C++ CLI)
    GB28181协议RTP传输
    gsoap使用总结
    C++ (使用gsoap)调用 WCF服务
  • 原文地址:https://www.cnblogs.com/1rui/p/5509825.html
Copyright © 2011-2022 走看看