Vue custom image/src lazy loading

  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
            }
        }
    }
    var init = {
    
    
        lazyLoad: false,
        default: 'image/billnull.png'
    }

    var listenList = [];
    var imageCatcheList = [];

    const isAlredyLoad = (imageSrc) => {
    
    
        if(imageCatcheList.indexOf(imageSrc) > -1){
    
    
            return true;
        }else{
    
    
            return false;
        }
    }
    //检测图片是否可以加载，如果可以则进行加载
    const isCanShow = (item) =>{
    
    
        if(typeof item =='undefined')return false;
        var ele = item.ele;
        var src = item.src;
        //图片距离页面顶部的距离
        var top = ele.getBoundingClientRect().top;
        //页面可视区域的高度
        var windowHeight = window.innerHeight;
        //top  进入可视高度+可视高度一半的都展示
        var halfHeight=windowHeight*0.5
        if(top>1-windowHeight&&top  < (windowHeight+halfHeight)&&imageCatcheList.indexOf(src)==-1){
    
    
            ele.src = src;
            imageCatcheList.push(src);
            listenList.remove(item);
            console.log("加载了:"+src);
            return true;
        }else{
    
    
            return false;
        }
    };


    var preViousOffset=0;
    const isStopScroll=()=>{
    
    
       var currentOffset= window.scrollY;
        var length = listenList.length;
        if(preViousOffset==currentOffset&&length>0){
    
    
           for(let i = 0;i<length;i++ ){
    
    
               isCanShow(listenList[i]);
           }
        }
        preViousOffset=currentOffset;
    };
    //设置一个定时器不停的访问滚动条的距离 这个秒数决定了src赋值的时间  如果这个秒没有动就加载这个src
    setInterval(isStopScroll,1000);

    //滚动条监听
    const onListenScroll = () =>{
    
    
        window.addEventListener('scroll',function(){
    
    
            preViousOffset= window.scrollY;
        })
    };
    //Vue 指令最终的方法
    const addListener = (ele,binding) =>{
    
    
        imageCatcheList=[];//更新的时候去除记录
        //绑定的图片地址
        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();
    }

    // //注册一个全局的指令 v-lazyloadbill
    Vue.directive('lazyloadbill',{
    
    
        inserted:addListener,//被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
        update:addListener//所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
    })