图片如何监测是否加载成功？

发布于
2019-06-14

想做个图片懒加载的功能
我在img的src属性里添加了占位图的地址，然后在real-src里保存了图片的真实地址。
现在我想要加载图片资源，如果图片加载成功则把src替换为real-src的值
我该如何仅凭一个图片地址来判断是否是有效的图片？

javascript html

阅读 2.5k

4 个回答

得票最新

xialeistudio

21.5k32658

发布于
2019-06-14

✓ 已被采纳


<body>
    <img lazy-src="https://avatar-static.segmentfault.com/199/098/1990980043-58ccbb8107e5c_big64"
        alt="">
</body>
<script>
    document.body.onload = function () {
        document.querySelectorAll('[lazy-src]').forEach(img => {
            const src = img.getAttribute('lazy-src');
            const newImg = document.createElement('img');
            newImg.onload = function () {
                img.setAttribute('src', src);
            };
            newImg.onerror = function (e) {
                console.error(e);
            }
            newImg.src = src;
        })
    }
</script>

li_shifeng

6811616

发布于
2019-06-14

var img = document.createElement('img');

img.src = url;
img.onload = function(){
    // 图片加载了
}

你说啥

发布于
2019-06-14

新手上路，请多包涵

用过一个东西叫“imagesLoaded”，Github或者官网

李国彪

4125

发布于
2019-06-19

新手上路，请多包涵

这个是预加载？

撰写回答

你尚未登录，登录后可以

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

推荐问题

图片如何监测是否加载成功？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？