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

效果预览

使用方法

下载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. 001-多线程-锁-架构【同步锁、JUC锁】

    一.概述 Java中的锁,可以分为"同步锁"和"JUC包中的锁". 1.1.同步锁 即通过synchronized关键字来进行同步,实现对竞争资源的互斥访问的锁 ...

  2. MySQL truncate()函数的使用说明

    1.TRUNCATE()函数介绍 TRUNCATE(X,D) 是MySQL自带的一个系统函数. 其中,X是数值,D是保留小数的位数. 其作用就是按照小数位数,进行数值截取(此处的截取是按保留位数直接进 ...

  3. ES6重要点学习

    1.解析赋值: let [a,b,c,d,e] = '我是中国人' //我 a = wo let [a,b,c] = 123 // 出错,Numberbu不允许解析不允许解析 2.数据集合Set, m ...

  4. gitlab安装、下载、推送 代码(推荐)

    环境: 内存必须5G以上 centos7.5 服务端:192.168.0.74 客户端:192.168.0.73 GitLab的安装 1.在CentOS系统上,下面的命令将会打开系统防火墙HTTP和S ...

  5. leetcode 四数之和

    这里我们可以考虑将 n 数之和降低为一个数加上 n-1 数之和的问题.依次降低 ,最低是二数之和的问题 ,二数之和问题容易解决.主要在于从 n 到 n-1 的过程需要理解 :下列代码中前几个 if 是 ...

  6. Ubuntu 14.04安装Python3

    1.添加源 sudo add-apt-repository ppa:fkrull/deadsnakes 2.更新 & 安装 sudo apt-get update sudo apt- pyth ...

  7. flask上下文管理相关 - threading.local 以及原理剖析

    threading.local 面向对象相关: setattr/getattr class Foo(object): pass obj = Foo() obj.x1 = 123 # object.__ ...

  8. npm run build 报错 Error: No PostCSS Config found in...

    module.exports = { plugins: [ require('autoprefixer')//自动添加css前缀 ] }; 在项目根目录新建postcss.config.js文件,添加 ...

  9. std::unique_lock与std::lock_guard分析

    背景 C++多线程编程中通常会对共享的数据进行写保护,以防止多线程在对共享数据成员进行读写时造成资源争抢,导致程序出现未定义或异常行为.通常的做法是在修改共享数据成员时进行加锁(mutex).在使用锁 ...

  10. 常用的API

    API (application programming Interface)应用程序编程接口 java 是字典 Scanner类的功能可以实现从键盘输入到程序当中. 引用类型的一般使用步骤 ·1导包 ...