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

效果预览

使用方法

下载vue-img-preload插件

npm install vue-img-preload

配置参数

  1. eachLoaded(function): 每次加载成功图片的行为,默认在控制台打印one picture has been loaded
  2. allLoaded(function): 所有图片加载成功的行为,默认在控制台打印all picture has been loaded
  3. type(string): 图片有序/无序加载,默认为’disorder‘,采用无序加载,如果type值不为’disorder‘,则采用有序加载。使用有序加载时,建议设置为‘order’。
  4. max: 一次加载的照片个数,默认值为1000,当图片数量小于max时,加载所有图片;当图片的数量大于max时,采用分块加载,当前块加载完毕后才会加载下一块,每块的长度为max

Vue-img-preload的更多相关文章

  1. [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 ...

  2. vue.js移动端app实战2:首页

    貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...

  3. 资源预加载preload和资源预读取prefetch简明学习

    前面的话 基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用 资源优先级 在介 ...

  4. vue 移动端项目总结(mint-ui)

    跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require ...

  5. 用vue 写h5页面-摇一摇

    vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...

  6. vue中使用video插件vue-video-player

    一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...

  7. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  8. 经典文摘:饿了么的 PWA 升级实践(结合Vue.js)

    自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算 ...

  9. vue 工作学习总结

    配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove ...

  10. 56.关于vue项目的seo问题

    不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...

随机推荐

  1. Mac 平台安装MySQL

    Mac 平台安装MySQL   一.下载MySQL MySQL官网上https://dev.mysql.com/downloads/mysql/,下载Community Server版 出现如下界面, ...

  2. kotlin标准委托之惰性装载

    lazy函数,接受一个lambda表达式作为参数,返回一个Lazy<T> 类型的实例,这个实例可以作为委托,实现惰性加载属性;第一次调用get时,将会执行从lazy函数传入的lambda表 ...

  3. kotlin中访问封闭作用内的变量

    在java中,匿名对象访问封闭作用域内的变量,需要用final 声明变量在java8中,如果只是使用封闭作用域内的变量,该变量并不需要使用final,但是一旦修改值,就需要使用final 来声明变量. ...

  4. python包中__init__.py文件的作用

    python包中__init__.py文件的作用 __init__.py文件最常用的作用是标识一个文件夹是一个 python包. __init__.py文件的另一个作用是定义模糊导入时要导入的内容. ...

  5. iOS tableview的常用delegate和dataSource执行顺序

    在这次项目中遇到了一个特别奇葩的问题:表视图创建的cell在7以上的系统能正常运行显示,在模拟器上就不能正常实现......为解决这个问题,纠结了好久...... 对在7系统上不显示的猜测: 用mas ...

  6. golang的下载与安装

    golang的官网可能由于政策原因登陆不上. 所以可以到Go语言中文网下载:https://studygolang.com/dl 我下载的是go1.10.3.windows-amd64.msi安装包, ...

  7. Mysql按照设计顺序获得某个表的字段名称,字段类型,字段描述!!!!!

    编写sql语句 select column_name,data_type ,column_comment from information_schema.columns where table_nam ...

  8. Had I not seen the Sun(如果我不曾见过太阳)

    Had I not seen the Sun by Emily Dickinson Had I not seen the Sun I could have borne the shade But Li ...

  9. 【编程开发】MD5算法原理

    MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权费用.     MD5功能: ...

  10. 最新 唯品会java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.唯品会等10家互联网公司的校招Offer,因为某些自身原因最终选择了唯品会.6.7月主要是做系统复习.项目复盘.LeetCo ...