如何判断图片是否加载完成

一、load事件

通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的，通过onload判断加载完成后再将图片显示出来。

<img class="pic1" οnlοad="get(this)" src="" style='display:none' />
 
<script type="text/javascript">
function get(ts){
    ts.style.display = 'block';  //显示图片
}
</script>

二、img的complete属性


<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - complete attribute</title>

</head> 

<body>

    <img id="img1" src="">

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

文章转载自：判断图片是否加载完成 http://www.studyofnet.com/news/745.html