最近项目中遇到一个问题，当图片加载不出来时。在pc，mobile上面，图片的位置是空白的。但是苹果pad上面，图片的位置是一个淡淡的方框，如图
于是就想到给这个无法显示的图片加一个visibility: hidden;这样就看不见，并且位置还保留着。同理，也可以替换为一张默认图片。
与加载有关的事件有2个，onerror和onload
1.使用onerror解决img加载失败的问题
先看一看官网对该事件的介绍
onerror 事件会在文档或图像加载过程中发生错误时被触发。
支持该事件的 HTML 标签：
<img>, <object>, <style>
支持该事件的 JavaScript 对象：
window, image
demo1.图片获取失败时制空
//当图片加载失败时，隐藏图片
<img onerror="checkError()"/>
<script>
function checkError(e){
e.target.style.visibility = 'hidden';
}
</script>实验得知，1.当图片地址为空时，会触发该事件。2.当图片有地址，但是没图片，在获取失败404时也会触发该事件
demo2.图片获取失败时，用默认图片替换
//当图片加载失败时，替换图片为default.png
<img onerror="checkError()"/>
<script>
function checkError(e){
e.target.src = 'default.png';
}
</script>
但是如果默认图片也获取失败时，将会进入无限替换的循环中。
//当图片加载失败时，替换图片为default.png
<img onerror="checkError()"/>
<script>
function checkError(e){
if(e.target.src == 'default.png'){
return false
}
e.target.src = 'default.png';
}
</script>
2.使用onload解决img加载失败的问题
先看一看官网对该事件的介绍
onload 事件会在页面或图像加载完成后立即发生。
onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本
支持该事件的 HTML 标签：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>支持该事件的 JavaScript 对象：
image, layer, window