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

　　

本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考,具体如下:

　　

vue图片懒加载使用

　　

首先第一步,安装插件

　　

<强> vue-lazyload

　　 　　 　　npm安装vue-lazyload——save-dev 　　 　　之前 　　 　　

在man.js中引入插件

　　 　　 　　从“vue-lazyload”进口VueLazyLoad 　　 　　之前 　　 　　

<强>使用

　　 　　 　　Vue.use (VueLazyLoad, { 　　错误:",//加载失败的图 　　加载://加载中的默认图 　　}） 　　 　　之前 　　 　　

这是一个最简单的配置

　　

官方的详细扩展配置文档

　　

　　 　　 　　 　　关键 　　描述 　　默认的 　　选项 　　 　　 　　 　　 　　<代码>预加载代码> 　　<代码> 数量> <代码> “data-src” 　　代码字符串<代码> 　　 　　 　　<代码>加载代码> “data-src” 　　代码字符串<代码> 　　 　　 　　<代码>尝试/代码> 　　尝试计数(尝试加载图片数量) 　　<代码> 3 　　<代码> 数量 　　 　　 　　<代码> listenEvents 　　 　　

事件,你想vue听

　　

(想要监听的vue事件)

　　

默认(“滚动”)可以省略,

　　

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

　　

可以尝试其他选项

　　 　　 　　

<代码>[“滚动”(默认),

　　

<代码>“轮”,

　　

<代码> mousewheel,

　　

<代码>“调整”,

　　

<代码> animationend,

　　

<代码> transitionend,

　　

<代码> ' touchmove ']

　　 　　想要听事件 　　 　　 　　<代码>适配器代码> 动态修改

元素的属性 　　

(动态修改元素属性)

　　 　　<代码>{} 　　元素适配器 　　 　　 　　<代码>过滤器> {} 　　图像侦听器过滤器 　　 　　 　　<代码> lazyComponent 　　lazyload组件 　　<代码>假 　　懒惰的组件 　　 　　 　　<代码> dispatchEvent 　　触发dom事件 　　<代码>假 　　<代码>布尔> throttleWait 　　节气门等 　　<代码> 200 　　<代码> 数量 　　 　　 　　<代码>观察者 　　使用IntersectionObserver 　　<代码>假 　　<代码>布尔> observerOptions 　　IntersectionObserver选项 　　{rootMargin: 0 px,阈值:0.1} 　　IntersectionObserver
　　, 　　 　　 　　 　　

　　

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

　　 　　 　　& lt; ul> 　　& lt;李v=癷mg在名单”比; 　　& lt; img v-lazy=" img。在src”; 　　& lt;/li> 　　& lt;/ul> 　　 　　之前 　　 　　

对图片单独进行配置

　　

<强>方法1

　　 　　 　　& lt; div v-lazy-container="{选择器:img,错误:“xxx.jpg”,加载:‘xxx.jpg}“祝辞& lt;/div> 　　 　　之前 　　 　　

<强>方法2

　　

将<代码> v-lazy=皁bj”,,赋值一个对象

　　

在数据里面声明对象

　　

可以设置三个属性<代码> src> 　　

希望本文所述对大家vue.js程序设计有所帮助。

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