vue-lazyload | 一款基于Vue.js的图片懒加载插件

vue-lazyload是一款基于Vue.js的图片懒加载插件。它可以帮助您在应用程序中懒加载图像或组件。使用该插件可以提高网页的性能，减少不必要的资源加载。

vue-lazyload懒加载插件支持vue2和vue3。需要对应下载不同版本的vue-lazyload。

使用方法

vue-lazyload懒加载插件的使用方法很简单，您只需要在Vue应用程序中安装插件，并将其作为选项配置项传递。以下是使用该插件的步骤：

安装

如果您想使用vue-lazyload懒加载插件，首先您需要安装它，命令如下：

npm install vue-lazyload 
或 
yarn add vue-lazyload
		

使用

在main.js或其他入口文件中导入插件：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1
})			
		

将插件作为Vue应用程序的选项配置项传递

Vue.use(VueLazyload, {
	loading: '加载中...',
	error: '加载失败',
	attempt: 3
})
		

在配置项中，您可以设置以下选项：

• loading：加载图像或组件时显示的占位符。
• error：如果加载失败，则显示的文本或图像。
• attempt：尝试加载图像或组件的次数。

此外，您还可以在组件中使用v-lazy指令来指定要懒加载的图像或组件。例如：

<img v-lazy="/path/to/image.jpg">			
		

使用这个指令将会使该图片在滚动到可视范围内时加载。

使用v-lazy-container

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
			
		

自定义 error 和 loading 占位图片

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>			
		

配置参数

vue-lazyload懒加载插件的配置参数如下：

• preLoad：预定义高度比例，默认为1.3。
• error：图片加载出错时显示的图像地址。
• loading：加载时显示的图像地址。
• attempt：尝试加载图像或组件的次数。默认值为3。
• listenEvents：可监听的事件。有：['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']。
• adapter：动态修改元素的属性。
• filter：图片的监听过滤器。
• lazyComponent：是否为lazyload容器，默认为false。
• dispatchEvent：是否触发dom事件，默认为false。
• throttleWait：节流时间，默认为200毫秒。
• observer：是否使用交叉观察。默认为false。
• observerOptions： observer的选项，{ rootMargin: '0px', threshold: 0.1 }
• silent：是否打印调试信息。默认为true。

github网址：https://github.com/hilongjw/vue-lazyload