vue自定义指令

8 篇文章 0 订阅
/*  自定义指令   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
    })
  }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值