一个接近完美的图片懒加载功能函数

图片懒加载

此功能函数特色：

1. 由于图片懒加载需要监听滚动条事件，而滚动条事件触发非常频繁，因此函数内部做了众多优化；
2. 无论滚动条是 html 的、 body 的，或者某个容器的，都能通过此函数实现懒加载功能；
3. 使用简单：只需调用 $lazyloadFn(<传入滚动条元素节点>) 即可实现。

使用方法

1. 在 index.html 的 script 标签中添加下面的代码，把 $lazyloadFn 添加为 window 的方法；
2. img 标签的 data-src 属性添加真实图片地址，src 属性添加 loading 图片地址；
3. 图片地址请求回来并且添加到 img 的 data-src 之后调用 $lazyloadFn(<传入滚动条元素节点>);
4. 滚动条是 html 或者 body 时，<传入滚动条元素节点> 为 window，如果图片在某个容器里滚动的，则传入这个容器节点；
5. 注意如果传入滚动条元素节点不是 window 则滚动条元素须开启定位，且滚动条元素到 img 标签之间的元素不能开启定位和 transform。

函数内部的优化

1. 滚动条往回滚时退出滚动条监听事件函数；
2. 滚动条往前滚且停止滚动时才执行遍历图片是否可见；
3. 当遍历到图片不可见时，那么它之后的图片都是不可见的，退出遍历；
4. 已经替换为真实图片地址的不会再遍历；
5. 当所有图片地址都替换为真实图片地址时，删除滚动条监听；
6. 获取不到 data-src 属性的 img 标签，删除滚动条监听。

window.$lazyloadFn = function (el) {
  if(el === undefined) return
  let index=0, oldScroll=0, timeId, imgs
  let scrolly = el.scrollTop || el.pageYOffset || 0
  el.addEventListener('scroll',lazyload)
  forFn()
  function lazyload(){
    scrolly = el.scrollTop || el.pageYOffset || 0
    if(scrolly < oldScroll && scrolly > 5) return
    if(scrolly - oldScroll > 300) forFn()
    clearInterval(timeId)
    timeId = setTimeout(forFn,200)
  }
  function forFn() {
    imgs = document.querySelectorAll('[data-src]')
    if(imgs.length === 0){
      el.removeEventListener('scroll',lazyload)
      return
    }
    if(scrolly > oldScroll) oldScroll = scrolly
    if(index === imgs.length) el.removeEventListener('scroll',lazyload)
    if(el === window){
      for (let i=index,length=imgs.length; i<length; i++){
        if(imgs[i].getBoundingClientRect().top-window.innerHeight<0){
          imgs[i].src = imgs[i].getAttribute("data-src")
          index++
        }else break
      }
    } else {
      for (let i=index,length=imgs.length; i<length; i++){
        if(imgs[i].offsetTop <= el.clientHeight + el.scrollTop){
          imgs[i].src = imgs[i].getAttribute("data-src")
          index++
        }else break
      }
    }
  }
}