当我们项目使用到大量的图片时候，为了解决不必要的资源浪费，一般会选择一个懒加载。下面就说一下vue-lazyload插件的使用

第一步。下载 npm install vue-lazyload 

第二步。在main.js中启用此插件 

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
  loading:'../static/img/load.png'
});

第三步。在实例中使用

   <img v-lazy="item.imgurl" >

其中 用v-lazy 代替:src 这样 懒加载就完成了。

下面介绍一下文档

keydescriptiondefaultoptions
preLoadproportion of pre-loading height（预加载高度比例）1.3Number
errorsrc of the image upon load fail（图片路径错误时加载图片）'data-src'String
loadingsrc of the image while loading（预加载图片）'data-src'String
attemptattempts count（尝试加载图片数量）3Number
listenEvents

events that you want vue listen for

（想要监听的vue事件）

默认['scroll']可以省略，

当插件跟页面中的动画或过渡等事件有冲突是，

可以尝试其他选项

['scroll'（默认）,

'wheel',

'mousewheel',

'resize',

'animationend',

'transitionend',

'touchmove']

Desired Listen Events
adapter

dynamically modify the attribute of element

（动态修改元素属性）

{ }Element Adapter
filterthe image's listener filter（动态修改图片地址路径）{ }Image listener filter
lazyComponentlazyload componentfalseLazy Component
dispatchEventtrigger the dom eventfalseBoolean
throttleWaitthrottle wait200Number
observeruse IntersectionObserverfalseBoolean
observerOptionsIntersectionObserver options{ rootMargin: '0px', threshold: 0.1 }IntersectionObserver

 
  
  

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue