0

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

2019-06-14 提问
4 个回答
1

已采纳

<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>
0
var img = document.createElement('img');

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

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

0

这个是预加载?

撰写答案

推广链接