1.作用

　　在图片较多的页面中，页面加载性能较差。使用图片懒加载可以让图片出现在可视区域时再进行加载，从而提高用户体验。

2.原理

　　设置img标签的src属性为空或统一的图片路径（如加载中样式），监听页面的滚动，当图片出现在可视区域时再为src重新赋值。

3.实现

　　在vue项目中，可以使用vue的vue-lazyload插件。

  • 安装插件：npm install vue-lazyload --save-dev
  • 引入插件：import VueLazyload from 'vue-lazyload'
  • 使用插件：Vue.use(VueLazyload)
  • 修改图片显示方式：<img v-lazy="/public/images/a.jpg/">
  • 插件的配置项：

【vue】---- 图片懒加载的更多相关文章

  1. Vue图片懒加载插件

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

  2. vue 图片懒加载 vue-lazyload

    图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽. ...

  3. Vue图片懒加载

    图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...

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

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

  5. VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）

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

  6. vue-lazyload 的使用（vue图片懒加载）

    github地址:https://github.com/hilongjw/vue-lazyload npm i vue-lazyload -S 或者 <script src="http ...

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

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

  8. vue 图片懒加载v-lazy

    搬运自:https://blog.csdn.net/twodogya/article/details/80223331 vue v-lazy官方API:https://www.npmjs.com/pa ...

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

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

  10. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

随机推荐

  1. 函数动态参数和Python中的三种空间

    动态参数 : *args 实参角度: 定义一个函数时, * 将所有的位置参数聚合到一个元祖中 顺序 : 位置参数 > * args > 默认参数 > **kwargs 接受所有参数 ...

  2. 四、RabbitMQ Exchange类型

    RabbitMQ整体上是一个生产者与消费者模型,主要负责接收.存储和转发消息.可以把消息传递的过程想象成:当你将一个包裹送到邮局,邮局会暂存并最终将邮件通过邮递员送到收件人的手上,RabbitMQ就好 ...

  3. 安装centos7后不能联网

    我们在安装centos的minimal版本后,在使用yum安装工具时会提示:cannot find a valid baseurl or repo:base/7/x86_64 这是因为不能联网导致的, ...

  4. [洛谷P4782] [模板] 2-SAT 问题

    NOIp后第一篇题解. NOIp我考的很凉啊...... 题目传送门 之前讲过怎么判断2-SAT是否存在解. 至于如何构造一组解: 我们想到对tarjan缩点后的图进行拓扑排序. 那么对于代表0状态的 ...

  5. 2015-09-14-初级vector

    标准库vector类型 #include<vector> using std::vector; vector为一个类模板. vector的初始化 vector<T> v1; v ...

  6. mysql--sql_mode报错整理

    1.在5.7版本以上mysql中使用group by语句进行分组时, 如果select的字段 , 不是完全对应的group by后面的字段 , 有其他字段 , 那么就会报这个错误 ERROR 1055 ...

  7. 【转载/部分修改】超实用STL——set的入门使用

    本文部分转载自他人博文,少部分自行进行了添改qwq 参考文章:https://blog.csdn.net/chaoyueziji123/article/details/38422211 作者:chao ...

  8. 状压DP小拼盘

    有的DP题,某一部分的状态只有两种,选或不选. 开数组记录,代价太大,转移不方便. 状态压缩意为,用 “0/1“ 表示 “选/不选“ . 把状态表示为二进制整数. There are 10 kinds ...

  9. 吴裕雄--天生自然KITTEN编程：飞船大战

  10. python对csv读写

    1.csv文件读取 with open("C:\\Users\\Administrator\\Desktop\\test.csv", 'r', encoding='utf-8') ...