js懒加载

意义：

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

原理：

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

实现：

实现方式：原生js

HTML

如图所示

引入一堆图片src为空，图片路径写在data-original中

JavaScript

如图所示

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

效果

图片未加载出来

鼠标下滑时图片加载出来

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

这就是图片懒加载的实现。