JS图片懒加载——前端性能优化

js懒加载：简单粗暴实现方法

---

意义

懒加载（LazyLoad）是前端优化的一种有效方式，能极大的提升用户体验，图片加载是其重点，如果加载图片过多将大大增http请求次数或大小，然而更多时候用户并不会浏览到全部加载进来的图片，这种代价是非常不值得的，所以当用户浏览到当前视口时再去加载相应的图片无疑是两全其美的选择

原理：只有img标签中的src写入了图片的地址，加载页面时才会请求图片，所以使用懒加载时在src中并不写入任何地址，把图片的真实地址放到data- (标签内部属性可存数据)属性中，在js中绑定鼠标滚动事件，其回调中遍历所有图片并作出判断，将出现在视口中的图片的 'data-' 属性保存的地址放到 'src' 中即可

实现

实现方式：原生js

HTML：

引入一堆图片src为空，地址写在data-original中，onerror表示当未加载图片时显示的临时加载页图片

JavaScript ：

当图片进入到视口160px时将会加载进来

效果：

当图片滚动到视口范围内才会加载该图片