欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-18 08:31:54
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。       一、load事件   &nb...
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。

 

 

 

一、load事件

 

 

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - load event</title>

</head> 

<body>

    <img id="img1" src=/uploadfile/2014/0504/20140504085632827.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        img1.onload = function() {

            p1.innerHTML = 'loaded'

        }

    </script>

</body>

</html>

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

 

 

 

二、readystatechange事件

 

 

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - readystatechange event</title>

</head> 

<body>

    <img id="img1" src=/uploadfile/2014/0504/20140504085632827.jpg">

    <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属性

 

 

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - complete attribute</title>

</head> 

<body>

    <img id="img1" src=/uploadfile/2014/0504/20140504085632827.jpg">

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