转一个简单的vue.js的图片懒加载的插件代码!

直接上源代码:

export default (Vue , options = {})=>{
  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: '/static/img/yes.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.src = src;
      image.onload = function(){
        ele.src = src;
        imageCatcheList.push(src);
        listenList.remove(item);
      }
      return true;
    }else{
      return false;
    }
  };
 
  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
  })
}

调用方法:

import LazyLoad from 'lazyLoad.js'
Vue.use(LazyLoad);