封装vue可视区域图片懒加载
首页 > >    作者:lininn   2018年11月29日 15:46 星期四   热度:1058°   百度已收录  
时间:2018-11-29 15:46   热度:1058° 
export default (Vue) => {
  var imageCatcheList = [];
  //初始化数据
  var init            = {
    default: 'http://test.group.batmobi.net/dist/image/transprent.png',
  }
  //是否已下载
  const hasLoad       = (src) => {
    if (imageCatcheList.indexOf(src) > -1) {
      return true;
    }
    else {
      return false;
    }
  }
  //图片下载处理
  const imageLoad     = (el, src) => {
    var image    = new Image();
    image.onload = function () {
      el.src = src;
      imageCatcheList.push(src);
    }
    image.src    = src;
  }
  //是否可以展示
  const isCanShow     = (el, src) => {
    //节点离浏览器顶部的距离
    var offsetTop    = el.offsetTop;
    //页面可视区域的高度
    var windowHeight = window.innerHeight;
    var scroll       = windowHeight + window.scrollY;
    var offsetHeigth = el.offsetHeight;
    if (scroll > offsetTop && (window.scrollY - offsetTop) < offsetHeigth) {
      //查询图片是否已加载过,是则直接加载,否则先load
      if (hasLoad(src)) {
        el.src = src;
      }
      else {
        imageLoad(el, src);
      }
    }
  }

  const addListener = (el, bind) => {
    var imageSrc = bind.value;
    //赋值默认值
    el.src       = init.default;
    isCanShow(el, imageSrc);
    window.addEventListener('scroll', function (event) {
      isCanShow(el, imageSrc, event);
    });
  }

  Vue.directive('lazy', {
    inserted: addListener,
    updated : addListener,
  })
}

使用方法
在main.js中注册指令

Vue.use(imgLazyload);
1
2
在*.vue组件中加载指令

<img v-lazy="img-url">

二维码加载中...
本文作者:lininn      文章标题: 封装vue可视区域图片懒加载
本文地址:?post=267
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn