js 怎么知道图片加载完成

图片描述

没加载出来时用loading,加载成功后用正确的图片,怎么判断图片加载完成了呢?

阅读 13.4k
4 个回答

主要是img.onload判断,但是考虑兼容性的话加上img.complete吧,imgLoaded是图片加载后的回调函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="height:1000px;">
            
        </div>
        <button onclick="loadImage(document.getElementById('myimg'),'http://img.taopic.com/uploads/allimg/140326/235113-1403260G01561.jpg',imgLoaded)">加载</button>
        <img src="" alt="" id="myimg" />
        <script>
            function loadImage(obj,url,callback){
                var img = new Image();
                img.src = url;
                obj.src = url;
                if(img.complete){
                    callback.call(img);
                    return false;
                }
                img.onload = function(){
                    callback.call(img);
                }
            }
            function imgLoaded(){
                console.log(this.width);
            }
        </script>
    </body>
</html>

大概思路就是将图片放在一个数组里,然后使用Image对象的onload方法实现,下面的代码只是一个大概的思路(依赖jq,可能有bug)

$("[data-src]").each(function () {
    var url = $(this).data('src')
    var img = new Image()
    img.onload = () => {
        $(this).attr('src', url)
    }
    img.src = url;
})

或者找一个插件
http://www.htmleaf.com/jQuery...

图片也有 onload 事件。

 img.onload = function(){
                   console.log('这时加载完成')
                }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题