Vue-img-preload
预加载页面上的图片资源,提高用户体验

效果预览
使用方法
下载vue-img-preload插件
npm install vue-img-preload
配置参数
- eachLoaded(function): 每次加载成功图片的行为,默认在控制台打印one picture has been loaded。
- allLoaded(function): 所有图片加载成功的行为,默认在控制台打印all picture has been loaded。
- type(string): 图片有序/无序加载,默认为’disorder‘,采用无序加载,如果type值不为’disorder‘,则采用有序加载。使用有序加载时,建议设置为‘order’。
- max: 一次加载的照片个数,默认值为1000,当图片数量小于max时,加载所有图片;当图片的数量大于max时,采用分块加载,当前块加载完毕后才会加载下一块,每块的长度为max
Vue-img-preload的更多相关文章
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolv ...
- vue.js移动端app实战2:首页
貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...
- 资源预加载preload和资源预读取prefetch简明学习
前面的话 基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用 资源优先级 在介 ...
- vue 移动端项目总结(mint-ui)
跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require ...
- 用vue 写h5页面-摇一摇
vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...
- vue中使用video插件vue-video-player
一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- 经典文摘:饿了么的 PWA 升级实践(结合Vue.js)
自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算 ...
- vue 工作学习总结
配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove ...
- 56.关于vue项目的seo问题
不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...
随机推荐
- ROS 常用命令
1.查看网卡接口: /interface print 2.给网口添加IP地址: /ip address add address=192.168.1.254/24 interface=ether1 3 ...
- 微信自定义分享 IOS端分享失败
1.在IOS微信浏览器中自定义分享link 链接中的中文需要encodeURIComponent() 编码(安卓会自动编码) 2.另外在IOS微信浏览器中自定义分享 imgUrl 不能大于34KB ...
- JAVA 基础编程练习题48 【程序 48 加密】
48 [程序 48 加密] 题目:某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密 规则如下:每位数字都加上 5,然后用和除以 10 的余数代替该数字,再将第一位和第四位交 ...
- RocketMQ采坑记
先来一篇解释比较多的实例 https://www.cnblogs.com/super-d2/p/4154541.html No route info of this topic, PushTopic ...
- swift 第十二课 as 的使用方法
忽略的基础性的问题,应该早点写出这个问题的解释比较好,毕竟 swift 好多的地方都用到了 as as!as?,是非常容易搞晕大脑的 1,as使用场合 (1)从派生类转换为基类,向上 ...
- Leetcode之分治法专题-654. 最大二叉树(Maximum Binary Tree)
Leetcode之分治法专题-654. 最大二叉树(Maximum Binary Tree) 给定一个不含重复元素的整数数组.一个以此数组构建的最大二叉树定义如下: 二叉树的根是数组中的最大元素. 左 ...
- MFC中使用ADO进行数据库操作
参考FROM:http://hi.baidu.com/sunkanghome/item/e1fda510b3186359f1090ee2 数据库与数据库编程: 当前各种主流数据库有很多,包括Oracl ...
- du 和 df命令
测试环境数据库收到磁盘报警时,需要清理部分磁盘空间 df -h 查看整个磁盘占有 找到对应目录 查看每个文件夹占有磁盘量: sudo du -h --max-depth=1 data/ --max-d ...
- idea配置svn,maven,jdk和一些基础设置
1.idea配置svn 1.1 首先下载svn,百度云链接:链接:https://pan.baidu.com/s/1PvSBuHcHMrrBHfnOfVRC9Q 提取码:hs7l 1.2 开始安装 这 ...
- 解决SpringMVC拦截静态资源的问题
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...