JS图片error事件绑定不生效

想要达到的效果:
- 当图片加载异常时, 修改img的src显示默认的失败图片.

下面是前端代码.

<html>
<head>
...
</head>
<body>

    ...

    <img src="${pageContext.request.contextPath}/personalInfo/showHeadIcon" class="layui-nav-img" />

    //[将监听图片error的js引入进来]
    <script src="${pageContext.request.contextPath}/js/console.js"></script>

</body>
</html>

上面的功能就是优先加载用户上传的图片, 如果用户没有上传那么会出现404, 然后修改src以显示默认图片

下面是js不生效的代码:

        var isLoaded;
        document.addEventListener("error", function(e) {
            var elem = e.target;
            if (elem.tagName.toLowerCase() !== 'img') {
                return;
            }
            //[如果不是导航栏的头像]
            if (!$(elem).hasClass('layui-nav-img')) {
                return;
            }
            if (isLoaded) {
                return;
            }

            //[改变头像的src]
            $(elem).attr('src', 'http://t.cn/RCzsdCq');
            isLoaded = true;
        }, true);

上面的js代码相信大家都见过, 网上说的基本都是这种方法, 然而图片确实会404, 但是这个监听代码就是没有执行, 那么为什么呢, 静下心来想了很久才灵光一闪.

出现这个问题的原因:
- 由于html优于js加载, 所以img会先出现error然后js再绑定事件, 这时事件就无效了, 这也是为什么直接在img上设置onerror有效的原因.
解决方法:
- 想要解决就需要先让error事件绑定然后再加载图片.
- 那么将原来的img的src改为gy-src让其加载时不访问图片接口, 然后先绑定事件, 然后再将gy-src改回src, 这样事件就触发了, 亲测有效(先绑定事件还是先修改src都在一个js文件里面, 测试的时候就算两个函数颠倒位置也可以正常执行error事件, 但是推荐先绑定事件, 毕竟原理上是存在优先级的)

优化后的前端代码:

<html>
<head>
...
</head>
<body>

    ...

    <img gy-src="${pageContext.request.contextPath}/personalInfo/showHeadIcon" class="layui-nav-img" />

    //[将监听图片error的js引入进来]
    <script src="${pageContext.request.contextPath}/js/console.js"></script>

</body>
</html>

优化后的JS:


        //[先绑定事件]
        var isLoaded;
        document.addEventListener("error", function(e) {
            var elem = e.target;
            if (elem.tagName.toLowerCase() !== 'img') {
                return;
            }
            //[如果不是导航栏的头像]
            if (!$(elem).hasClass('layui-nav-img')) {
                return;
            }
            if (isLoaded) {
                return;
            }

            //[改变头像的src]
            $(elem).attr('src', 'http://t.cn/RCzsdCq');
            isLoaded = true;
        }, true);

        //[js加载时执行, 将图片gy-src改回src让error事件生效]
        $('.layui-nav-img').each(function (index, item) {
            var src = $(item).attr('gy-src');
            $(item).attr('src', src);
        });

光影九曜

发布了14 篇原创文章 · 获赞 0 · 访问量 1760

私信关注

JS图片error事件绑定不生效

想要达到的效果:

下面是前端代码.

下面是js不生效的代码:

出现这个问题的原因:

解决方法:

优化后的前端代码:

优化后的JS:

猜你喜欢