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

最新推荐文章于 2022-11-08 19:46:06 发布

whazhl

最新推荐文章于 2022-11-08 19:46:06 发布

阅读量2.1k

点赞数 1

分类专栏： jquery 文章标签： Web

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

whazhl

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何判断图片是否加载完成

一、load事件通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的，通过onload判断加载完成后再将图片显示出来。 function get(ts){ ts.style.display = 'block'; //显示图片}二、img的complete属性
复制链接

扫一扫