浅谈vue中使用图片懒加载vue-lazyload插件详细指南
时间:2019-04-07
本文章向大家介绍浅谈vue中使用图片懒加载vue-lazyload插件详细指南,主要包括浅谈vue中使用图片懒加载vue-lazyload插件详细指南使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在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' ] })
如果您遇到这个插件重新设置加载的麻烦,这是很有用的
当你有某些动画和过渡的时候。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 万达网科年底集体裁员?公司回应仅是业务调整
- 两个四字母域名均以五位数被交易
- Flash/Flex学习笔记(15):FMS 3.5之远程共享对象(Remote Shared Object)
- Android Fragment完全解析
- Centos下堡垒机Jumpserver V3.0环境部署完整记录(2)-配置篇
- Flash/Flex学习笔记(53):利用FMS快速创建一个文本聊天室
- 28家银行用户体验调研报告:洞见银行业的“进化论”
- 性能计数器数据收集服务
- SQL SERVER 内存分配及常见内存问题 DMV查询
- 6 利用Docker .NET应用程序模板制作您的容器应用程序(第2部分)
- Mesos+Zookeeper+Marathon的Docker管理平台部署记录(1)
- git review报错一例
- Nginx采用https加密访问后出现的问题
- 对比git rm和rm的使用区别
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 线上发生死锁异常了,该怎么办
- jQuery 元素操作
- jQuery 文本属性值
- jQuery 属性操作
- 方老师聊Nginx知识点
- 《Java从入门到失业》第五章:继承与多态(5.1-5.7):继承
- 【赵渝强老师】Flink的DataSet算子
- Node.js 案发现场揭秘 —— 文件句柄泄露导致进程假死
- nacos配置问题
- Chevereto 配合 Picgo 打造个人相册/图床解决方案
- 从提高 Elasticsearch 搜索体验说开去......
- 又一个奇葩要求,Python是如何将“中文”转“拼音”的?
- localStorage中怎么存对象?
- vue中sessionStorage的使用
- 别再问我 Python 怎么识别数字验证码了!