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

来源：互联网发布：js 对象key为变量编辑：程序博客网时间：2024/04/30 16:09

一、load事件

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

<img class="pic1" onload="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

0 0