图片懒加载

在scroll事件的回调中，

一 图片判断距离窗口的位置：

document.body.clientHeight,窗口高度

scrollElement.scrollTop: 滚动条滚动距离（注意是定高的父元素，不是内容高度被撑开的子元素。scrolld css样式也在父元素上设置）

当前img.getBoundingClientRect().top:当前元素的位置信息的top；

function inScreen(dom) {
  const clientHeight = document.body.clientHeight;
  const info = dom.getBoundingClientRect();
  if (info.top + dom.offsetHeight >= 0 && info.top < clientHeight) {
    return true;
  } else {
    return false;
  }
}

二 懒加载真实图片的写法

function loadRealImage(img, src) {

  var temp = new Image();

  temp.onload = function () {

    img.src = src;

  }

  temp.src = src;

}

三 防抖函数防止在scroll的频繁触发

const debunceDealer = debunce( function () {
  imgArr = imgArr.filter((element) => { //imgArr是包含所有图片元素的数组
    if (inScreen(element.el)) {
      loadRealImage(element.el, element.src);
      return false
    } else {
      return true
    }
  })
},200)

四 如果用scroll，则可以直接写了。

如果用自定义指令，并且用bus传值，则可以参考如下代码：

$bus.$on('blogMainlScroll',debunceDealer )//绑定自定义事件， 当滚动条滚动时候，触发事件，执行debunceDealer


export default {
  inserted(el, binding) {
    el.src = defaultImg;
    if (inScreen(el)) {
      loadRealImage(el, binding.value)
    } else {
      imgArr.push({ el, src: binding.value })
    }
  },
  unbind(el) {
    imgArr = []
  }
}