实现懒加载的几种方式(一) |
您所在的位置:网站首页 › vue页面实现 › 实现懒加载的几种方式(一) |
1. 什么是懒加载?
当我们碰到长网页有很多图片时,我们会采用先加载出现在视口内的几张图片,当滚动条滚动到相应图片的位置时才去加载别的图片。这种延迟加载的方式我们就称之为懒加载。 2. 懒加载的优点 提升用户体验假设一个场景:当我们浏览淘宝的时候,页面需要加载很长时间才能显示出来,根据3秒钟定律,此时用户肯定已经失去了耐心。但是使用懒加载就能够大大提升页面的展现速度,从而提升用户体验。 减轻服务器压力想象一下,如果一个人需要在短时间内做很多事情,那这个人肯定压力会很大。服务器也是一样的,我们通过懒加载就减轻了服务器的工作量,让它有时间缓一缓,再来处理后面的事情。 3. 实现原理前面铺垫了这么多,下面重点来了(敲黑板!!!)。 我们实现懒加载的想法是一开始只加载显示在视口内的图片,从上图可以看出,我们可以先只加载前两张图片。那么如何保证图片不加载出来呢? 可以通过将图片的地址保存在img元素的自定义属性上面,当需要加载的时候再将该自定义属性赋值给该图片的src。 那么问题来了,什么时候加载后面的图片呢? 就是在我们滚动滚动轴的时候,当下一张图片的顶部马上要出现在视口的时候去加载下一张图片。 好啦,现在我们已经知道该什么去加载下一张图片了。那么接下来是第二个问题:怎么知道下一张图片马上要出现在视口上了呢? 就是当图片距离浏览器顶部的高度---即offsetTop |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |