vue实现图片懒加载的方法分析

首先第一步，安装插件

vue-lazyload

npm install vue-lazyload --save-dev

在man.js中引入插件

import VueLazyLoad from 'vue-lazyload'

使用

Vue.use(VueLazyLoad,{ error:'', //加载失败的图 loading:'' //加载中的默认图 })

这是一个最简单的配置

官方的详细扩展配置文档

key description default options
preLoad   proportion of pre-loading height（预加载高度比例）   1.3   Number  
error   src of the image upon load fail（图片路径错误时加载图片）   'data-src'   String  
loading   src of the image while loading（预加载图片）   'data-src'   String  
attempt   attempts count（尝试加载图片数量）   3   Number  
listenEvents  

events that you want vue listen for

（想要监听的vue事件）

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

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

可以尝试其他选项

 

['scroll'（默认）,

'wheel',

'mousewheel',

'resize',

'animationend',

'transitionend',

'touchmove']

   
adapter  

dynamically modify the attribute of element

（动态修改元素属性）

  { }    
filter   the image's listener filter（动态修改图片地址路径）   { }    
lazyComponent   lazyload component   false    
dispatchEvent   trigger the dom event   false   Boolean  
throttleWait   throttle wait   200   Number  
observer   use IntersectionObserver   false   Boolean  
observerOptions   IntersectionObserver options   { rootMargin: '0px', threshold: 0.1 }  
   

实现懒加载，使用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错误状态下的图片