vue图片懒加载使用

首先第一步,安装插件

vue-lazyload

npm install vue-lazyload --save-dev

在man.js中引入插件

import VueLazyLoad from 'vue-lazyload'

使用

Vue.use(VueLazyLoad,{

error:'', //加载失败的图

loading:'' //加载中的默认图

})

这是一个最简单的配置

 

官方的详细扩展配置文档

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
 

 

实现懒加载,使用v-lazy代替src属性

<ul>

  <li v-for="img in list">

    <img v-lazy="img.src" >

  </li>

</ul>

 

对图片单独进行配置

方法1

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"></div>

方法2

将v-lazy='obj'   赋值一个对象

在data里面声明对象

可以设置三个属性 src  图片  loading加载状态下的图片  error错误状态下的图片

 

 

Logo

前往低代码交流专区

更多推荐