适用于Vue.js 2+的Lazyload插件– vue-l-lazyload

适用于Vue.js 2+的Lazyload插件– vue-l-lazyload

插件名称:vue-l-lazyload

发布时间:2020年5月26日

插件作者:lsycxyj

官网 GitHub下载

Vue.js v2.x +的惰性加载和视图内检测插件。

特征:

  • 除了Vue,没有其他依赖项
  • 渐进式配置
  • 灵活的事件触发加载
  • 支持lazyload作为src属性和背景图片
  • 定制的重试控制
  • 过滤规则替换url
  • 事件委托和被动事件侦听器(如果可用)可提高性能
  • LazyComp用于延迟加载子组件。
  • InViewComp用于视图内检测

安装和下载:

# NPM
$ npm install vue-l-lazyload --save

使用

一种简单的方法:

import { VueLLazyload } from 'vue-l-lazyload';
// 对于具有树抖动的较小的生产代码,我建议您导入
// 导入 { VueLLazyloadLocal: VueLLazyload } 到'vue-l-lazyload/src';
Vue.use(VueLLazyload, {
	events: 'scroll'
});
// 根目录$lazy“Vue.$lazy”将在安装后可用
<img lazy="xxx.png">

一种更可配置的方式:

import { VueLLazyload } from 'vue-l-lazyload';
Vue.use(VueLLazyload, config);
<lazy-ref ref="lazyRef" opts="config">
    <img lazy="{src:xxx.png, ref:'lazyRef'}">
</lazy-ref>
相关插件