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。
