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. Linux文件属性和权限

     Linux文件属性 第一栏:表示文件类型和权限 文件的类型:  d:目录    -:文件    l:链接文件    b:可存储设备    c:可输入设备 第一组:表示拥有者权限 第二组:表示该组的权 ...

  2. python3下scrapy爬虫(第六卷:利用cookie模拟登陆抓取个人中心页面)

    之前我们爬取的都是那些无需登录就要可以使用的网站但是当我们想爬取自己或他人的个人中心时就需要做登录,一般进入登录页面有两种 ,一个是独立页面登陆,另一个是弹窗,我们先不管验证码登陆的问题 ,现在试一下 ...

  3. file,path,uri互相转换

    uri 转 file :File file = new File(new URI(uri.toString())); uri 转 path: Path path = Files.get(uri); f ...

  4. CSS预处理技术

    CSS自定义变量 这是一个实验中的标准,后续的具体写法和解析可能会有变动. 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译.因为其名称本身就包含了语义的信息,这使得 ...

  5. 了解DocumentFragment 给我们带来的性能优化

    首先我们需要了解 DocumentFragment 是什么? w3c 上面的详细解释:link here 我把关键点写下来了: DocumentFragment 节点不属于文档树,继承的 parent ...

  6. mysql-5.7.14-winx64解压版配置

    1.下载最新的MySQL文件并且解压 我的位置是 F:\mysql-5.7.14-winx64 2.F:\mysql-5.7.14-winx64\bin; 添加到环境变量-系统变量-PATH下 3.复 ...

  7. Django ORM必会13条之外的查询方法

    基于双下划线的查询 # 价格 大于 小于 大于等于 小于等于 filter(price__gt=') # 筛选出大于90 filter(price__lt=') # 筛选出小于90 filter(pr ...

  8. SQL命令汇总

    order by rocketmq_id; 查找主从在同一IP的集群和节点2. select rocketmq_id,ip,port,type,count(*) as num  from t_rock ...

  9. 机器学习 —— 数据预处理

    对于学习机器学习算法来说,肯定会涉及到数据的处理,因此一开始,对数据的预处理进行学习 对于数据的预处理,大概有如下几步: 步骤1 -- 导入所需库 导入处理数据所需要的python库,有如下两个库是非 ...

  10. useful_tool

    记录工作学习中遇到的经典好用的工具软件. 工作篇 AxeSlide斧子演示 AxeSlide是PPT的良好替代品,跨平台,基于Html5 2D/3D技术开发.动画特效等效果十分不错.工具提供很多免费模 ...