集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端开发培训:Vue的图片懒加载插件vue-lazyload应用

发布者: 成都达内     浏览次数:     发布时间:2020-08-13 11:12:02

成都前端开发培训:作为一名web前端工程师,不仅需要有过硬的开发能力,更需要有强大的用户体验意识。...

  引言:

  作为一名web前端工程师,不仅需要有过硬的开发能力,更需要有强大的用户体验意识。

  可视化页面是与用户交互的直接媒介!前端工程师的价值,本人认为主要体现在交互!

  概念:

  1.什么是图片懒加载?

  顾名思义,图片懒加载针对的对象是图片。图片是一种多媒体资源,在加载过程中会消耗较多的网络资源。

  通常对于图片的优化主要是降低图片质量以保证文件足够小,要么利用base64格式进行压缩。可是这么做治标却不治本!

  懒加载的核心是“懒”!也就是说,需要你的时候你给我出现,不让你出现的时候给我休眠!

  2.为什么需要图片懒加载?

  web资源的加载速度,不光能够影响用户体验感,还能够优化SEO,并且在一定程度上能够满足开发者的成就感。

  如今的电商网站可以说是千千万万,各个大型电商网站的商品页列表数据,在一定程度上达到了海量数据的级别。

  如果我们在一个页面加载过程中去请求列表数据,得到的图片数量也是比较庞大的,这对浏览器渲染带来了不小的压力。

  那么,图片懒加载,就成为了缓解这种压力最适合的解决方案!并且在vue项目中,存在很方便的插件vue-lazyload可以使用。

  应用:

  1.安装vue-lazyload:

  非常方便,只需要在vue项目中安装vue-lazyload:

  npm i vue-lazyload -S

  2.引入vue-lazyload:

  找到项目中的main.js,引入以下代码:

  1 import lazyLoad from 'vue-lazyload' /* 引入vue-lazyload用 */

  2 Vue.use(lazyLoad);  /* 注册lazyLoad */

  3.简单使用vue-lazyload:

  我们使用v-lazy属性进行图片引入,循环36个:

  1 (img v-lazy="require('../assets/3016328129_14.jpg')" v-for="(item,index) in 36" :key="index" />

  4.实现效果:

  如下图,右边滑动条只有这么一点,我们往下滑动,会加长,这就是懒加载!

  

  补充:

  1.配置扩展:

  我们可以配置加载中的图片和加载失败显示的图片。

  Vue.use(lazyLoad, {

  error: require('./assets/error.png'), //图片路径错误时加载图片

  loading: require('./assets/loading.png') //预加载图片

  });

  还可以配置其它项

  成都前端开发培训:Vue的图片懒加载插件vue-lazyload应用

  2.样式扩展:

  /* 加载时 */img[lazy="loading"] {

  width: 373px;

  height: 266px;

  background: #ddd;

  }/* 加载失败 */img[lazy="error"] {

  width: 373px;

  height: 266px;

  background: red;

  }/* 加载后,没理解,但刚进入页面时有一瞬间是这个效果 */

  img[lazy="loaded"] {

  width: 373px;

  height: 266px;

  background: green;

  }

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56