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

效果预览

使用方法

下载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. SQL-W3School-高级:SQL 撤销索引、表以及数据库

    ylbtech-SQL-W3School-高级:SQL 撤销索引.表以及数据库 1.返回顶部 1. 通过使用 DROP 语句,可以轻松地删除索引.表和数据库. SQL DROP INDEX 语句 我们 ...

  2. 使用es6一句话去重

    let arr = [1,2,3,4,5,1,2,3] let arr2 = Array.from(new Set(arr)) console.log(arr2) //[1,2,3,4,5]

  3. Python扫描器-爬虫基础

    0x1.基础框架原理 1.1.爬虫基础 爬虫程序主要原理就是模拟浏览器发送请求->下载网页代码->只提取有用的数据->存放于数据库或文件中 1.1.基础原理 1.发起HTTP请求 2 ...

  4. lua调用的c函数模块命名规则

    比如lua中调用C函数 socket.core() , 在c中需要这样命名:luaopen_socket_core(); 基本模式是添加luaopen_前缀,讲.变为_

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

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

  6. MySQL创建用户、授权、删除

    1.在MySQL中创建新用户 使用具有shell访问权限的root用户登录MySQL服务器并创建名为“rahul”的新用户.下面的命令只允许从localhost系统访问用户rahul的MySQL服务器 ...

  7. AssassinGo: 基于Go的高并发可拓展式Web渗透框架

    转载自FreeBuf.COM AssassinGo是一款使用Golang开发,集成了信息收集.基础攻击探测.Google-Hacking域名搜索和PoC批量检测等功能的Web渗透框架,并且有着基于Vu ...

  8. TCP为什么要三次握手?

    在<计算机网络>一书中其中有提到,三次握手的目的是“为了防止已经失效的连接请求报文段突然又传到服务端,因而产生错误”,这种情况是: 一端(client)A发出去的第一个连接请求报文并没有丢 ...

  9. thinkphp5 默认配置代码

    <?php // +---------------------------------------------------------------------- // | ThinkPHP [ ...

  10. 一个基于Unix套接字的注册登录系统

    2016/5/5 今天,我参考<Unix网络编程-卷1>第5章的TCP回射客户/服务器程序写了一个简单的注册登录系统,其功能如下:(1)注册.客户端向服务器发送个人信息请求注册,服务器查询 ...