vue 延迟加载_Vue2.x的延迟加载图像插件

vue 延迟加载

Vue延迟加载图像 (vue-lazyload-images)

A plugin of lazy-load images for Vue2.x

Vue2.x的延迟加载图像插件

Support images lazyload in window or build-in element.

支持在窗口或内置元素中延迟加载图像。

安装 (Installation)

npm (npm)

$ npm install vue-lazy-images

or

要么

脚本 (script)

<script src="dist/VueLazyImages.js"></script>

用法 (Usage)

Entry.js

Entry.js

import Vue from "vue"
import VueLazyImage from "vue-lazy-images";
Vue.use(VueLazyImage)

Template

模板

<lazy-image 
    :src='url'
    :img-class='string'  //or :img-class="['classname1','classname2']"
    :placeholder='url of placeholder or loading image'  
/>

选件 (Options)

Vue.use(VueLazyImage,options)

Vue.use(VueLazyImage,options)

key	description	default	type
offset	offset distance for pre-loading	0	Number
events	events that you want parentNode listen for	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Array
throttle	spacing interval of continuous calling	0(ms)	Number
debounce	idle time between two actions	0(ms)	Number

键	描述	默认	类型
抵消	预加载的偏移距离	0	数
大事记	您希望parentNode监听的事件	[“滚动”，“滚轮”，“鼠标滚轮”，“调整大小”，“动画结束”，“过渡结束”，“触摸移动”]	数组
风门	连续通话间隔	0(毫秒)	数
去抖动	两个动作之间的空闲时间	0(毫秒)	数

翻译自: https://vuejsexamples.com/a-plugin-of-lazy-load-images-for-vue2-x/

vue 延迟加载