基于Vue2.0实现屏幕可视区域图片懒加载

来源：互联网发布：淘宝配送地在哪里修改编辑：程序博客网时间：2024/04/28 13:37

基于Vue2.0可视区域图片懒加载

指令代码

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);
```
在*.vue组件中加载指令
```
<img v-lazy="img-url">
```

阅读全文

1 0