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

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

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

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

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

进去看到了一个图片懒加载的方法(哎,之前的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. 华为OJ平台试题 ——数组:整形数组合并

    代码: /* * 将两个整型数组依照升序合并,而且过滤掉反复数组元素 */ #include <stdio.h> #define N 256 #define M 512 /* * 合并数组 ...

  2. SPSS提示“列表中不同意存在字符串变量”的解决方法

    今天用SPSS对一些数据进行主成分分析,SPSS 19.0进行主成分分析的方法是:分析--降维--因子分析,可是当导入一些变量的时候.就会弹出窗体说"列表中不同意存在字符串变量", ...

  3. WPF 布局控件 之 DockPanel

    DockPanel为容器控件 主要了解其Dock属性和LastChildFill属性的使用 一.LastChildFill="True" 时 代码: <DockPanel L ...

  4. C++模板类代码只能写在头文件?

      这个问题,实际上我几年前就遇到了.最近写个模板类玩的时候,再次遇到.   当我非常仔细的将定义和实现分开,在头文件中保留了最少的依赖后,一切就绪.cpp单独编过.但是当使用的时候,就会报告所有的函 ...

  5. js---15深拷贝浅拷贝 原型链

    //&&得到的结果不是布尔类型,如果前面都是 true就执行最后一个,并返回最后一个表达式的值,前面有一个为false,后面不执行,返回前面表达式的值 var a = 3; var b ...

  6. gvim window7 下提示乱码

    今天在win7下安装gvim的时候,发现所有的提示信息都是乱码的,在网上找到了如下的解决方案.在此记录下,方便以后查阅. 以下内容转载自http://blog.csdn.net/rehung/arch ...

  7. Raid阵列之简单介绍

    1.raid分类 软raid:用软件模拟raid芯片 硬raid:集成的后来添加的 2.raid基本简介 (1)raid是由廉价磁盘冗余阵列发展成为独立磁盘冗余阵列 (2)linux是借助MD(Mui ...

  8. SAR(遥感、卫星) 图像常用数据集

    Brazilian Coffee Scenes数据集较小,5MB左右: UC Merced Land Use Dataset(数据集规模较大,300MB+) MSTAR public targets ...

  9. 1.实用:Google Chrome 键盘快捷键大全

    转自:https://www.cnbeta.com/articles/soft/64070.htm 窗口和标签页快捷方式 Ctrl+N 打开新窗口 按住 Ctrl‎ 键,然后点击链接 在新标签页中打开 ...

  10. POJ 2455 二分+网络流

    题意: 思路: 莫名其妙TLE 啊woc我A了一坨题的网络流模板有问题 !!!! 在常数上会慢 (一个等于号 啊啊啊) 改了所有网络流有关的文章- .... //By SiriusRen #inclu ...