js 怎么知道图片加载完成

T_one

1.3k41531

发布于
2017-09-18

图片描述

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

javascript html

html5 css

阅读 13.4k

4 个回答

得票最新

陌路凡歌

7.9k21119

发布于
2017-09-18

✓ 已被采纳

主要是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>

psycho

2266

发布于
2017-09-18

更新于
2017-09-18

大概思路就是将图片放在一个数组里，然后使用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('这时加载完成')
                }

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

js 怎么知道图片加载完成

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？