这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战；
懒加载
何为“懒”加载
懒加载，“懒”字可以理解成拖延，延迟，慢，通俗来讲，就是让长网页延迟加载，当用户滚动进入到可视区域才来加载。与之对应的有个预加载，下面我们来一起先来了解一下懒加载，有兴趣的小伙伴可以下来再去对比了解一下预加载。
懒加载的好处
试想，如果一个用户商品列表页面很长，我们不做任何优化，把全部图片资源都加载出来，这样由于图片数量很多，浏览器会同时发送很多image资源的请求，浏览器解析加载渲染就需要耗费很长时间，造成页面卡顿。
用户体验就很不好。可能用户视野外的图片被加载完成了，而用户视野内的图还没有被显示出来。有些时候用户可能并不需要看没有加载出来的图片，懒加载就会避免浪费用户的流量、资源等。
所以采用懒加载，这是一种很好优化网页性能的方式。好处归结如下：
-
极大提升用户体验。
-
提升浏览器页面加载速度
-
减少无效的资源加载。
懒加载实现
- 为列表大图添加
data-属性，如data-src='xxx.png'来代表图片真正的地址，而图片的src属性我们设置一个默认的占位图即可。 - 监听页面滚动，判断如果图片距离顶部的距离大于可视区域和滚动区域的和，说明当前元素已经出现在视口，我们应当加载图片了。这时获取
data-src来替换掉img真正的src路径。
是不是很简单呢，这里就不粘代码了，小伙伴们可以自己尝试写一下。
其实懒加载还能够再优化，就像我们日常看一些电商网站商品列表的时候，感觉不到图片加载慢，这其中有两点原因，一个是因为他们设置的预览图本身比较小，没有选择高清的大图；
还有一个更重要的原因，就是他们加载图片的时机了：他们会在判断到当前元素距离视口还差100px或150px的时候就去提前加载。这样就保证了我们的愉快购物啦！
