实现懒加载

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几 M 的大小，因此大量加载图片可能需要很长时间。因此我们可以让不在可视范围内的图片加载，等到
滚到那个区域时再加载图片，这样可以提升页面的加载速度

原理

img 标签有一个 src 标签先把他指向一个小图片或者空的字符串，然后自定义一个属性 src

img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

代码

当元素进入可见区域时，就把当前元素的 src 替换为 data-src

function lazyload() {
  //监听页面滚动事件
  var seeHeight = document.documentElement.clientHeight //可见区域高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //滚动条距离顶部高度
  for (var i = n; i < num; i++) {
    if (img[i].offsetTop < seeHeight + scrollTop) {
      if (img[i].getAttribute('src') == 'default.jpg') {
        img[i].src = img[i].getAttribute('data-src')
      }
      n = i + 1
    }
  }
}
window.addEventlistener('scroll', lazyload)

优化

可以使用防抖函数对其进行优化。防抖参照之前的文章