图片懒加载的实现

1. dataset

HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。
举个例子：

dinner

而当我们想要获取这个属性时：

var today = document.getElementById('today');  
var typeOfFood = today.dataset.food;

参考文献：https://www.zhangxinxu.com/wordpress/2011/06/html5自定义属性对象dataset简介/

2. 懒加载

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。所以懒加载基本的原理就是用dataset自定义属性取代src存储图片的路径，然后在检测到图片进入到可视区域的时候，再将其换为src。那我们就来基本实现一下吧。

• 基本布局
  首先将所有图片的src换为自定义属性data-src，这个时候图片是不显示的：

• 判断条件
  window.innerHeight 可以获取到这个窗口的高度(不包括工具栏和滚动条)。getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
  基本的判断就是如果该图片距离窗口上方的位置小于窗口的高度（也就是说该图片已经进入了窗口），那么就将该图片的src属性赋为data-src找那个存的图片路径。
  然后全局绑定scroll事件，在滚动页面的时候，图片进入到窗口后，500ms之后才会显示出图片。

这样就完后了一个懒加载图片的效果了。

3. 占位图
这样的懒加载图片的效果还不是很明显，我们通常会用一张占位图来显示该区域有图片即将加载出来（loading.gif），将所有图片的src设为占位图标，然后在滚动的时候图片进入可视区域src就会被替换成data-src中存的图片路径。完整的代码为：