网页中图片地址错误(onerror)时处理事件

1年前 4218次浏览

在网页前端中,如果遇到图片地址不正确时图片会显示为空白,只显示一个错误图标,如下图所示:

image.png

这样会影响前端体验,要如何处理这个问题呢?图片遇到错误时可以使用onerror事件来加载另一个图片,如:

<img src="imgurl" onerror="javascript:this.src='nopic.jpg';">

这句话的意思是,当图片出现错误时,就为这个图片设置地址为nopic.jpg这个地址。也就是说当设定的src地址不能正确显示的时侯,就通过onerror把这个图片的src设置为nopic.jpg;而图片地址能正确显示时则显示图片地址。

进阶使用

如果页面中图片过多,每一个都设置会比较麻烦,这个时侯可以使用一段jq代码来处理。

首先使用$('img').each遍历页面中的图片;

再使用$(this).attr('src')获得每一个图片路径;

如果图片路径为空则使用$(this).attr('src','图片路径')添加一个图片路径;

如果图片路径不为空则检测图片路径正确性,如果错误再使用$(this).attr('src','图片路径')为错误的图片设置一个新的图片路径。

下面为我这个想法的jq代码,注:因为使用的jq所以得先引入一个jq文件。

$(document).ready(function(){
    $('img').each(function(){
        var tt=$(this).attr('src');
        //console.log(tt);
        if(tt==""){
            $(this).attr('src','/template/style/images/nopic.png');
        }else{
            $(this).error(function(){
                $(this).attr('src','/template/style/images/nopic.png');
            })
        }
    });
})

在文件中加入了这段jq代码后,就不用单独为每一个图片设置onerror事件,当页面加载完后就会检测所有的图片,图片正确就不管,图片为空与图片错误就赋一个默认图片。这样不至于因为图片不显示而影响整体美观。

但是有一个缺点,error事件有时侯会没法办法执行,特别是在强制刷新时是绝对不执行的。但是onerror直接写在<img>标签里面就不会出现不能执行的情况。所以实际应用中到底使用哪一种方式还是看情况所需。

image.png


相关评论
暂无相关评论...
发表评论
评论说明:

1、评论暂仅只持纯文字评论。

2、请不要发表与内容无关的评论。

3、评论需要经由审核才能显示出来。

4、评论姓名与链接无要求,只要评论内容符合便可审核通过。