经常碰到这类场景，动态加载图片时，因为一些原因（图片链接不存在啊，图片误删啊，图片路径不对或图片路径为空等等）导致真实图片显示不出来。那么为了提高用户体验，都会显示一个默认图。
动态加载图片失败时，显示默认图的2种方案
查了一下img onerror文档和img onload文档，发现导致前端最终图片加载失败的情况会比较多，纯靠后端来解决很麻烦。而这两个方法从不同的方向都能解决无破裂图的效果。前者是从图片加载失败的角度入手，后者这是从加载完成（就是能正常加载）的角度入手。
1. 利用onerror方法更改img的src为默认图片路径。
示例代码：
<img src="img/test.png" alt="" onerror="this.src= 'img/img-default.png'; this.onerror = null;">
优点：1、无需添加额外的标签；
缺点：1、默认图加载失败时，破裂图仍旧存在。2、统一网站不同尺寸比例的图片可能需要多个尺寸的默认图。
2. 利用onerror方法更改img的样式display:none;，让img标签本身不可见。
示例代码：
<div class="img"><img src="img/test.png" alt="" onerror="this.onerror='';this.style.display='none'"></div>
优点：1、完美解决无破裂图；2、多尺寸比例的图片时，可能一个默认图就可以
缺点：1、需添加额外的标签。
3. 利用onload方法更改img的样式display:inline-block;，让img标签显示（一开始隐藏img标签）。
示例代码：
<div class="img"><img src="img/test.png" alt="" onload="this.style.display='inline-block'"></div>
优点：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。
附上测试的效果图：
效果图.png
最后，附上以上方案的调试源码：
样图：
img-default.png
test.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>图片加载失败，去掉默认的破裂图</title>
<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/fontawesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- // <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script> -->
<!-- // <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> -->
<style type="text/css">
/* 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;
}
</style>
</head>
<body>
<div class="container">
<h2>动态加载图片</h2>
<h3>分类</h3>
<div class="errorimg">
<div class="item">正常图片链接：<br>img/test.png</div>
<div class="item">拿不到图片的链接：<br>img/test-no.png</div>
<div class="item">默认图片链接：<br>img/img-default.png</div>
<div class="item">拿不到默认图片的链接：<br>img/img-default-no.png</div>
</div>
<h3>onerror加载默认图片方案</h3>
<div class="errorimg" id='test'></div>
<h3>onerror隐藏img标签方案</h3>
<div class="errorimg2" id='test2'></div>
<h3>onload显示加载完成的图片</h3>
<div class="errorimg2 type3" id='test3'></div>
</div>
<script>
$(function () {
function loadImgs() {
//动态加载图片(onerror加载默认图片方案)
var html = '';
html += '<img src="img/test.png" alt="" onerror="this.src= \'img/img-default.png\'; this.onerror = null;">';
html += '<img src="img/test-no.png" alt="" onerror="this.src= \'img/img-default.png\'; this.onerror = null;">';
html += '<img src="" alt="" onerror="this.src= \'img/img-default.png\'; this.onerror = null;">';
html += '<img src="" alt="" onerror="this.src= \'img/img-default-no.png\'; this.onerror = null;">';
$('#test').append(html);
//动态加载图片(onerror隐藏img标签方案)
var html2 = '';
html2 += '<div class="img"><img src="img/test.png" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
html2 += '<div class="img"><img src="img/test-no.png" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
html2 += '<div class="img"><img src="" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
html2 += '<div class="img"><img src="img/img-default-no.png" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
$('#test2').append(html2);
//动态加载图片(onerror隐藏img标签方案,onload显示正常图片)
var html3 = '';
html3 += '<div class="img"><img src="img/test.png" alt="" onload="this.style.display=\'inline-block\'"></div>';
html3 += '<div class="img"><img src="img/test-no.png" alt="" onload="this.style.display=\'inline-block\'"></div>';
html3 += '<div class="img"><img src="" alt="" onload="this.style.display=\'inline-block\'"></div>';
html3 += '<div class="img"><img src="img/img-default-no.png" alt="" onload="this.style.display=\'inline-block\'"></div>';
$('#test3').append(html3);
}
loadImgs();
});
</script>
</body>
</html>
网友评论