# 图片相关

# 默认图片

经常有这个需求，如果图片加载失败，要有一个默认图片。

<img src="{{image}}" onerror="showDefaultImage(this)" />

showDefaultImage = function (dom) {
  dom.src = '/1.jpg';
  dom.onerror = null;
};

如果能提前确认src无效

最好直接将它替换为默认图片，以减少一次网络请求

# 图片懒加载

所谓图片懒加载，其实就是在长网页中，延时加载图片，避免浪费，是一种很好的优化页面性能的方式。

优点：

提升用户体验，加快首屏加载速度
减少无效资源的加载
防止并发资源下载过多，阻塞js的加载

原理：

首先将页面上的图片的src属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件, 在事件回调中判断懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的src属性设置为data-original的值，这样就可以实现延迟加载。