vue自定义指令

/*  自定义指令   lazyload
*   功能：      图片懒加载  （进入到固定区域再加载；已加载过的不再加载）
*   步骤：1.数组原型上添加 删除（remove） 方法；
*         2.初始化的时候  默认显示一张图片；
*         3.未加载的图片；已经加载过的图片  分别放入两个数组；
* */
export default {
  install(Vue, options) {
    //--数组item remove方法
    if(!Array.prototype.remove){
      Array.prototype.remove = function(item){
        if(!this.length) return
        var index = this.indexOf(item);
        if( index > -1){
          this.splice(index,1);
          return this
        }
      }
    }

    //初始化的选项，default是未加载图片时显示的默认图片
    var init = {
      lazyLoad: false,
      default: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'
    }

    var listenList = [];          //需要进行监听的图片列表，还没有加载过得
    var imageCatcheList = [];     //已经加载过得图片缓存列表

    //是否已经加载过了
    const isAlredyLoad = (imageSrc) => {
      if(imageCatcheList.indexOf(imageSrc) > -1){
        return true;
      }else{
        return false;
      }
    }

    //检测图片是否可以加载，如果可以则进行加载
    const isCanShow = (item) =>{
      var ele = item.ele;
      var src = item.src;
      //图片距离页面顶部的距离
      var top = ele.getBoundingClientRect().top;
      //页面可视区域的高度
      var windowHeight = window.innerHight;
      //top + 10 已经进入了可视区域10像素
      if(top + 10 < window.innerHeight){
        var image = new Image();
        image.onload = function(){
          ele.src = src;
          imageCatcheList.push(src);
          listenList.remove(item);
        };
        image.src = src;
        return true;
      }else{
        return false;
      }
    };

    //添加监听事件scroll
    const onListenScroll = () =>{
      window.addEventListener('scroll',function(){
        var length = listenList.length;
        for(let i = 0;i<length;i++ ){
          isCanShow(listenList[i]);
        }
      })
    }

    //Vue 指令最终的方法
    const addListener = (ele,binding) =>{
      //绑定的图片地址
      var imageSrc = binding.value;
      //如果已经加载过，则无需重新加载，直接将src赋值
      if(isAlredyLoad(imageSrc)){
        ele.src = imageSrc;
        return false;
      }
      var item = {
        ele:ele,
        src:imageSrc
      }
      //图片显示默认的图片
      ele.src = init.default;
      //再看看是否可以显示此图片
      if(isCanShow(item)){
        return
      }
      //否则将图片地址和元素均放入监听的lisenList里
      listenList.push(item);
      //然后开始监听页面scroll事件
      onListenScroll();
    }

    //--注册指令
    Vue.directive('lazyload',{
      inserted:addListener,
      updated:addListener
    })
  }
}