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

意义

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

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

实现

HTML：

页面加载来自网络的图片时，可能会花费大量的时间，因此如果使用懒加载，能够让用户体验不到加载的过程

至此，我们便可以在页面中使用懒加载来优化用户体验了。

lazyLoad.html

---