htmlimg图片加载失败_动态加载图片失败的默认图显示

经常碰到这类场景，动态加载图片时，因为一些原因(图片链接不存在啊，图片误删啊，图片路径不对或图片路径为空等等)导致真实图片显示不出来。那么为了提高用户体验，都会显示一个默认图。

动态加载图片失败时，显示默认图的2种方案

查了一下img onerror文档和img onload文档，发现导致前端最终图片加载失败的情况会比较多，纯靠后端来解决很麻烦。而这两个方法从不同的方向都能解决无破裂图的效果。前者是从图片加载失败的角度入手，后者这是从加载完成(就是能正常加载)的角度入手。

1. 利用onerror方法更改img的src为默认图片路径。

示例代码：

优点：1、无需添加额外的标签；

缺点：1、默认图加载失败时，破裂图仍旧存在。2、统一网站不同尺寸比例的图片可能需要多个尺寸的默认图。

2. 利用onerror方法更改img的样式display:none;，让img标签本身不可见。

示例代码：

优点：1、完美解决无破裂图；2、多尺寸比例的图片时，可能一个默认图就可以

缺点：1、需添加额外的标签。

3. 利用onload方法更改img的样式display:inline-block;，让img标签显示(一开始隐藏img标签)。

示例代码：

优点：1、完美解决无破裂图；2、多尺寸比例的图片时，可能一个默认图就可以

缺点：1、需添加额外的标签。

个人推荐方案二和方案三。

ps：onerror方法里一般都会带this.onerror = null;，这是为了防止onerror方法造成的死循环导致内存溢出。假如正常图片加载失败，那么src会换成默认图的url，如果默认图也加载失败，又会加载默认图，一直循环下去。this.onerror = null;等于重置了onerror方法，从而达到只执行一次的目的。

测试的浏览器：IE9，IE10，edge，chrome83.0.4103.116，Firefox76.0.1，Opera68.0.3618.173，Safari13.1.1 (15609.2.9.1.2)。(其实方案二在最新浏览器版本基本都没破裂图了)

附上测试的效果图：

效果图.png

最后，附上以上方案的调试源码：

样图：

img-default.png

test.png

图片加载失败，去掉默认的破裂图

/* reset.css start*/

html {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

font-size: 62.5%;

}

body {

width: 100%;

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;

font-size: 1.4rem;

line-height: 2.5rem;

color: #000;

}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {

margin: 0;

padding: 0;

}

abbr, img, object, a img, :link img, :visited img, a object, :link object, :visited object {

border: 0;

}

address, caption, cite, code, dfn, em, th, var, i {

font-style: normal;

font-weight: normal;

}

/* reset.css end*/

/*develop css start*/

.container{

padding: 30px;

}

/*加载图片异常*/

.errorimg{

letter-spacing: -1em;

margin: 0 auto;

padding: 10px;

min-height: 120px;

}

.errorimg .item,

.errorimg img{

display: inline-block;

letter-spacing: normal;

margin: 10px;

width: 200px;

height: 120px;

border: 1px solid #a7a1a1;

overflow: hidden;

}

.errorimg2{

letter-spacing: -1em;

margin: 0 auto;

padding: 10px;

min-height: 120px;

}

.errorimg2 .img{

display: inline-block;

letter-spacing: normal;

margin: 10px;

width: 200px;

height: 120px;

border: 1px solid #a7a1a1;

overflow: hidden;

background: url("img/img-default.png") no-repeat center;

background-size: cover;

}

.errorimg2 .img img{

width: 200px;

height: 120px;

}

.errorimg2.type3 .img img{

display: none;

}

动态加载图片

分类

正常图片链接：
img/test.png

拿不到图片的链接：
img/test-no.png

默认图片链接：
img/img-default.png

拿不到默认图片的链接：
img/img-default-no.png

onerror加载默认图片方案

onerror隐藏img标签方案

onload显示加载完成的图片

$(function () {

function loadImgs() {

//动态加载图片(onerror加载默认图片方案)

var html = '';

html += '';

html += '';

html += '';

html += '';

$('#test').append(html);

//动态加载图片(onerror隐藏img标签方案)

var html2 = '';

html2 += '

';

html2 += '

';

html2 += '

';

html2 += '

';

$('#test2').append(html2);

//动态加载图片(onerror隐藏img标签方案,onload显示正常图片)

var html3 = '';

html3 += '

';

html3 += '

';

html3 += '

';

html3 += '

';

$('#test3').append(html3);

}

loadImgs();

});