在img标签上尽量不要使用onerror事件

时间：2022-02-27 18:35:45

在img标签上尽量不要使用onerror事件

因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的，但是如果刚好onerror去获取的图片也不在，那么就会一直触发onerror事件，这个标签一直在请求一个不存在的图片。也就是会一直循环请求。

如果必须使用的话,就使用js的Image对象获取这个图片的信息,判断一些属性是否正常,如果正常就使用这个图片作为默认图片,不正常则不显示。、

在img标签上尽量不要使用onerror事件

<img src="a.jpg" onerror="imgExists(this)" alt="">

<script>

    function imgExists(e){

        //默认图片

        var imgUrl = "https://account.acgxt.com/public/images/default.png";

        var img = new Image();

        img.src=imgUrl;

        //判断图片大小是否大于0 或者 图片高度与宽度都大于0

        if(img.filesize>0||(img.width>0&&img.height>0)){

            e.src = imgUrl;

        }else{

            //默认图片也不存在的时候

        }

    }

</script>

也可以使用XMLHTTP远程判断图片是否存在。然后根据远程获取的是404还是200来更换图片

相关文章