vue项目添加个全局的图片懒加载(vue-lazyload)
时间:2019-08-21
本文章向大家介绍vue项目添加个全局的图片懒加载(vue-lazyload),主要包括vue项目添加个全局的图片懒加载(vue-lazyload)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
npm:
npm i vue-lazyload -S
main.js:
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload,{ preLoad:0.5, //loading:require('./assets/loading.gif'), loading:'', attempt:2, listenEvents:['scroll'], filter: { index(listener, opts) { if (location.href.indexOf('index')>-1) { opts.ListenEvents = ['touchmove'] } } }, observer: true, observerOptions:{ rootMargin: '0px', threshold: 0.1 , } })
正常使用:
<img v-lazy="imgUrl" />
可是当你想自定义每个图片的loading效果的时候就不行了,翻看了几遍官网才发现有可以解决的方法
<script> export default { data () { return { imgObj: { src: 'http://xx.com/logo.png', error: 'http://xx.com/error.png', loading: 'http://xx.com/loading-spin.svg' }, imgUrl: 'http://xx.com/logo.png' // String } } } </script> <template> <div ref="container"> <img v-lazy="imgUrl"/> <div v-lazy:background-image="imgUrl"></div> <!-- with customer error and loading --> <img v-lazy="imgObj"/> <div v-lazy:background-image="imgObj"></div> <!-- Customer scrollable element --> <img v-lazy.container ="imgUrl"/> <div v-lazy:background-image.container="img"></div> <!-- srcset --> <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w"> <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" /> </div> </template>
重点是下面这句,他可以直接识别你对象里面的src、error、loading:
<img v-lazy="imgObj"/> <div v-lazy:background-image="imgObj"></div>
原文地址:https://www.cnblogs.com/chao202426/p/11389587.html
- 使用angular4和asp.net core 2 web api做个练习项目(一)
- =.=
- JavaScript经典面试题之for循环click
- 学习docker on windows (1): 为什么要使用docker
- 使用VS Code开发asp.net core (下)
- 使用VS Code开发asp.net core (上)
- 小程序开发总结
- Silverlight Load Client Image 加载客户端图片
- 使用xUnit为.net core程序进行单元测试(4)
- 使用xUnit为.net core程序进行单元测试(3)
- 使用xUnit为.net core程序进行单元测试(2)
- 使用xUnit为.net core程序进行单元测试(1)
- 用 Identity Server 4 (JWKS 端点和 RS256 算法) 来保护 Python web api
- asp.net core 2.0 查缺补漏
- 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 数组属性和方法
- Scrapy 爬虫模板--CrawlSpider
- 基于Docker部署GitLab环境搭建,以及项目管理
- C# 监控 Windows 文件夹
- Scrapy 爬虫模板--XMLFeedSpider
- Scrapy 爬虫模板--CSVFeedSpider
- Scrapy 爬虫模板--SitemapSpider
- 6搞懂线程池(二)
- var lady first
- 细说.NET 缓存
- Scrapy Pipeline
- 巧用 readonly与 const
- c# 枚举之间的转换
- React Hook 的底层实现原理
- Tensorflow Object Detection API 终于支持tensorflow1.x与tensorflow2.x了
- 细说枚举