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,放弃前 ...
随机推荐
- CentOS7下安装php-soap扩展
一.首先更新yum yum update 二.查看php-soap相关的安装包,查看php版本,安装对应php版本的php-soap版本 php -v yum search php | grep -i ...
- Docker 版本的更新和安装
涉及到网址:1.https://docs.docker.com/engine/installation/linux/docker-ce/ubuntu/#prerequisites (官网) ...
- 使用浏览器连接Linux服务器
wssh 可以让我们通过 HTTP 来调用远程的一个 shell,也就是说我们可以用浏览器来访问某个 Linux 服务器/虚拟机的终端(只要这个服务器上运行了 wsshd 服务器端).wssh 客户端 ...
- Qt编写安防视频监控系统4-删除视频
一.前言 一般会有两种处理方式来删除视频,一种是鼠标右键菜单,删除当前视频或者删除所有视频,一种是直接按住当前视频,移到视频通道界面以外就表示删除当前视频,这也是个比较人性化的设置,每个人的喜好不一样 ...
- 高级java面试宝典
1.spring事物的配置 spring事物分为俩种,一种是注解事物,一种是AOP事物注解事物的配置: 事物的隔离级别,事物的传播性,事物的超时回滚,哪些异常回滚,哪些不回滚,有默认的回滚规则注解事物 ...
- 使用linux flock文件锁实现任务锁定避免计划任务程序冲突
格式:flock [-sxun][-w #] fd#flock [-sxon][-w #] file [-c] command选项-s, --shared: 获得一个共享锁 -x, --exclusi ...
- Salt之CentOS7.5使用RPM包安装MySQL5.7.22
手动安装参考CentOS7.5使用RPM包安装MySQL5.7.22 目录结构为 install.sls文件 #按顺序分别安装commin libs client server #避免冲突安装comm ...
- Css3 权重
Css权重 权重--很多规则应用到同一个元素上时,权重是决定哪个生效的(优先级) 权重等级与权值 行内样式(1000)>ID选择器(100)>类.属性选择器或伪类选择器(10)>元素 ...
- Jmeter 逻辑控制器 之 交替控制器
马上国庆节了,没有安排新版本的上线任务,所以最近自学时间比较充裕,决定把Jmeter好好学习学习,并把学习过程分享到博客中,今天呢,学习交替控制器. 一.认识交替控制器 如下,在线程组下面创建一个交替 ...
- tf.contrib.layers.fully_connected参数笔记
tf.contrib.layers.fully_connected 添加完全连接的图层. tf.contrib.layers.fully_connected( inputs, num_ou ...