浅谈vue中使用图片懒加载vue-lazyload插件详细指南


Posted in Javascript onOctober 23, 2017

在vue中使用图片懒加载详细指南分享给大家。具体如下:

说明

当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。

使用方式

使用vue的 vue-lazyload 插件

插件地址:https://www.npmjs.com/package/vue-lazyload

案例

demo: 懒加载案例demo

Installation 安装方式

npm

$ npm i vue-lazyload -D

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
 Vue.use(VueLazyload)
 ...
</script>

用法

main.js 在入口文件

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1
})

new Vue({
 el: 'body',
 components: {
  App
 }
})

在入口文件添加后,在组件任何地方都可以直接使用把 img 里的:src -> v-lazy

<div class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="'/static/img/' + item.productImage" alt=""></a>
</div>

把之前项目中img 标签里面的 :src 属性 改成 v-lazy 

<div class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="'/static/img/' + item.productImage" alt=""></a>
</div>

参数选项说明

key description default options
preLoad proportion of pre-loading height 1.3 Number
error 当加载图片失败的时候 'data-src' String
loading 当加载图片成功的时候 'data-src' String
attempt 尝试计数 3 Number
listenEvents 想要监听的事件 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Desired Listen Events
adapter 动态修改元素属性 { } Element Adapter
filter 图片监听或过滤器 { } Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent 触发dom事件 false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserver

想要监听的事件

您可以通过传递数组来配置想要使用vue - lazyload的事件

监听器的名字。

Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1,
 // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
 listenEvents: [ 'scroll' ]
})

如果您遇到这个插件重新设置加载的麻烦,这是很有用的

当你有某些动画和过渡的时候。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
js查找节点的方法小结
Jan 13 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
angularjs实现猜大小功能
Oct 23 #Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 #Javascript
angularjs实现天气预报功能
Jun 16 #Javascript
angular.js实现购物车功能
Oct 23 #Javascript
使用store来优化React组件的方法
Oct 23 #Javascript
node文件批量重命名的方法示例
Oct 23 #Javascript
详解vue 实例方法和数据
Oct 23 #Javascript
You might like
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
python list排序的两种方法及实例讲解
2017/03/20 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
快速了解Python开发环境Spyder
2020/06/29 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
应届大学生自荐信格式
2013/09/21 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
python如何查找列表中元素的位置
2022/05/30 Python