浅谈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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
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
星际争霸任务指南——人族
2020/03/04 星际争霸
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python实现杨辉三角思路
2017/07/14 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python中for in的用法详解
2020/04/17 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
金融事务专业毕业生求职信
2014/02/23 职场文书
劳动竞赛口号
2014/06/16 职场文书
节电标语大全
2014/06/23 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
python脚本框架webpy模板控制结构
2021/11/20 Python