有时候一个网页会包罗良多的图片，例如淘宝京东那些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。办事器压力就会很大。不只影响衬着速度还会浪费带宽。好比一个1M大小的图片，并发情状下，到达1000并发，即同时有1000小我拜候，就会产生1个G的带宽。
为领会决以上问题，进步用户体验，就呈现了懒加载体例来减轻办事器的压力，优先加载可视区域的内容，其他部门等进入了可视区域再加载，从而进步性能。
vue项目中的打包，是把html、css、js停止打包，还有图片压缩。但是打包时把css和js都分红了几部门，如许就不至于一个css和就是文件十分大。也是优化性能的一种体例。
效果动图如下：
1.懒加载原理
一张图片就是一个img标签，阅读器能否倡议恳求图片是根据img的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给img的src赋值，如许阅读器就不会发送恳求了，比及图片进入可视区域再给src赋值。
2.懒加载构想及实现
实现懒加载有四个步调，如下：
1.加载loading图片
2.判断哪些图片要加载【重点】
3.隐形加载图片
4.替代实图片
如上图所示，让在阅读器可视区域的图片显示，可视区域外的不显示，所以当图片间隔顶部的间隔top-height等于可视区域h和滚动区域高度s之和时阐明图片马上就要进入可视区了，就是说当top-height=s+h时，图片在可视区。
如若转载，请说明出处：开源字节
0