今天看到我一醉哥的一篇朋友圈分享:《不如我们从头来过 | 掘金

看完之后,百感交集,互联网的浪潮使创业公司如雨后春笋般崛起,

每一个初创公司都会有一群怀着美好愿景的小伙伴,

但是当寒冬来临时,也不得不去面对这残酷的现实,愿每一个被离职的各位大佬发展的越来越好。

然后我随便点开了掘金站长:阴明大佬的主页,看到了提升掘金首页打开速度

进去看到了一个图片懒加载的方法(哎,之前的vue项目都没有用到懒加载,惭愧惭愧),很简单,实现如下:

npm i vue-lazyload -S

然后main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: '这里填图片错误时的替代图片',
  loading: '这里填图片加载时的替代图片',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

然后在img标签中的src 换成 v-lazy 即可使用

<img v-lazy="你的图片路径" >

更多详细文档请看 https://www.npmjs.com/package/vue-lazyload

vue 图片lazyload的更多相关文章

  1. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  2. js/vue图片压缩

    js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...

  3. vue图片、背景图片路径问题

    vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...

  4. Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作

    v-viewer 用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 从0.x迁移 你需要做的唯一改动就是手动引入样式文件: 1 import 'viewerjs/dist ...

  5. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  6. Vue图片懒加载插件 - vue lazyload的简单使用

    Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...

  7. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  8. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  9. vue 图片预览插件

    https://github.com/daidaitu1314/vue2-preview //cnpm cnpm install vue2-preview -save //引入 import VueP ...

随机推荐

  1. javescript定时器demo

    本来认为这个事情还是挺easy的不值得写上去,今天同事突然问我.我心想曾经写过,可是就是想不起函数的名称的,于是翻了一下原来的代码. function run() { interval = setIn ...

  2. 【HDU 4763】Theme Section(KMP)

    这题数据水的一B.直接暴力都能够过. 比赛的时候暴力过的.回头依照正法做了一发. 匹配的时候 失配函数 事实上就是前缀 后缀的匹配长度,之后就是乱搞了. KMP的题可能不会非常直接的出,可是KMP的思 ...

  3. 一题多解(三)—— Python 字符串的拼接

    1. format def event_log(name, time): print('Event: {}, happens at {}'.format(name, str(time))) 2. 使用 ...

  4. Ajax往后台传参数,无参数,一个参数,多个参数,一个对象等

    原文:http://www.cnblogs.com/chenwolong/p/Get.html //无参数请求-简单示例 $(document).ready(function () { $.ajax( ...

  5. 获取Spring容器中Bean实例的工具类(Java泛型方法实现)

    在使用Spring做IoC容器的时候,有的类不方便直接注入bean,需要手动获得一个类型的bean. 因此,实现一个获得bean实例的工具类,就很有必要. 以前,写了一个根据bean的名称和类型获取b ...

  6. 最优子结构(Optimal Substructure)

    最优子结构的存在是应用动态规划的前提(或者说必要条件),由此可以避免重复计算: 1. 图算法 最短路径的子路径也一定是最短的: 简单地反证,如果最短路径的中间两点,之间的路径不是最短路径的话,那么一定 ...

  7. BZOJ 3456 城市规划 ( NTT + 多项式求逆 )

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3456 题意: 求出\(n\)个点的简单(无重边无自环)无向连通图的个数.(\(n< ...

  8. Android 多线程断点续传同时下载多个大文件

    最近学习在Android环境中一些网络请求方面的知识,其中有一部分是关于网络下载方面的知识.在这里解析一下自己写的demo,总结一下自己所学的知识.下图为demo的效果图,仿照一些应用下载商城在Lis ...

  9. BZOJ3620: 似乎在梦中见过的样子(KMP)

    Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka 的一个噩梦,也同时是上个轮回中所发生的事.为了使 ...

  10. 洛谷 【P1252】马拉松接力赛

    洛谷 [P1252]马拉松接力赛 题目描述 某城市冬季举办环城25km马拉松接力赛,每个代表队有5人参加比赛,比赛要求每个的每名参赛选手只能跑一次,一次至少跑1km.最多只能跑10km,而且每个选手所 ...