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

效果预览

使用方法

下载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. gensim word2vec实践

    语料下载地址 # -*- coding: utf-8 -*- import jieba import jieba.analyse # suggest_freq调节单个词语的词频,使其能(或不能)被分出 ...

  2. Python3中_和__的用途和区别

    访问可见性问题 对于上面的代码,有C++.Java.C#等编程经验的程序员可能会问,我们给Student对象绑定的name和age属性到底具有怎样的访问权限(也称为可见性).因为在很多面向对象编程语言 ...

  3. oracle赋予一个用户具有查询另一个用户所有表数据

    一  以需要被查询的用户登录oracle(假如为A)   B为要查询A用户下的表的用户 二  执行查询语句: select 'grant select on A.'|| tname ||' to  B ...

  4. Build Telemetry for Distributed Services之OpenTracing项目

    中文文档地址:https://wu-sheng.gitbooks.io/opentracing-io/content/pages/quick-start.html 中文github地址:https:/ ...

  5. Linux下如何启用MySQL数据库远程访问

    远程连接MySQL出于安全考虑,一般都关闭了远程访问,但有时候需要提供远程访问数据库的服务,下面我们快速学习下: 第一步:修改my.cnf文件使用文本编辑器去编辑MySQL服务器的配置文件my.cnf ...

  6. Spring Boot项目中MyBatis连接DB2和MySQL数据库返回结果中一些字符消失——debug笔记

    写这篇记录的原因是因为我之前在Spring Boot项目中通过MyBatis连接DB2返回的结果中存在一些字段, 这些字段的元素中缺少了一些符号,所以我现在通过在自己的电脑上通过MyBatis连接DB ...

  7. sonar:sonarqube6.7.6与mysql5.7版本不匹配

    问题 更换sonarqube的数据库为mysql后,启动sonarqube,提示Database was upgraded to a more recent of SonarQube. 解决: 将so ...

  8. Hadoop 部署之 Hive (五)

    目录 一.Hive 简介 1.什么是 Hive 2.为什么使用 Hive 3.Hive 的特点 4.Hive 的架构 二.Hive 安装 1.MySQL 安装(datanode01) 2.MySQL ...

  9. 上传文件到CDN,上传后文件错误。

    开始用xfp上传,发现文件错误.后来改用filezilla,上传后文件正确.害苦了我啊

  10. 在 Laravel 中使用 MongoDB

     可参考:https://blog.csdn.net/weixin_38682852/article/details/80840678 环境准备 安装 MongoDB 安装 PHP-MongoDB 扩 ...