图片懒加载以及瀑布流原理

409 阅读2分钟

这是我参与2022首次更文挑战的第5天,活动详情查看:2022第一次更文挑战

一.什么是懒加载?

懒加载突出一个“懒”字,懒就是拖延迟的意思,所以“懒加载”说白了就是延迟加载,比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不下,那么懒加载就是优先加载可视区域的内容,其他部分等进入了可视区域在加载。

二.为什么要懒加载?

懒加载是一种网页性能优化的方式,它能极大的提升用户体验。就比如说图片,图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源,那么可能等图片加载

出来用户也早就走了。所以,我们需要懒加载,进入页面的时候,只请求可视区域的图片资源。

总结出来就两个点:

  1. 全部加载的话会影响用户体验

2.浪费用户的流量,有些用户并不像全部看完,全部加载会耗费大量流量。

3..懒加载的实现原理?

由于网页中占用资源较多的一般是图片,所以我们一般实施懒加载都是对图

片资源而言的,所以这里的实现原理主要是针对图片。

大家都知道,一张图片就是一个标签,而图片的来源主要是 src 属性。浏览器是否发起亲求就是根据是否有 src 属性决定的。

既然这样,那么我们就要对标签的 src 属性下手了,在没进入可视区域的时候,我们先不给这个标签赋 src 属性,这样岂不是浏览器就不会发送请求了。

瀑布流原理

瀑布流的实现原理就是通过比较每一列的高度,如果这一列高度低的话就在这一列进行添加,如果可视区距离和滚动距离想加的话比你当前页面的高度还要高的时候,页面就开再次加载多个,这个主要也是页面布局,如果你的布局实现的不好的话!也会出现问题,首先每一列的高度,都是需要自适应的,不能设置高通过每一块内容将每一列撑起来,还有一个问题就是,滑动底部,根据每个电脑的不同,所以他每个人,获取的高度是不同而且有的时候,页面的整体高度和页面可视区高度加上滚