懒加载、瀑布流

2020-08-14  本文已影响0人  清苑折纸

懒加载

懒加载是通过延迟加载不可见元素,提升网页性能,减少同一时间服务器请求的一种方式。当用户滚动当前页面时再去自动请求更多的数据,一次可加载固定数量数据,然后判断滚动是否到当前加载的所有元素的底部,当到达时再触发滚动事件则继续自动请求数据,加载新的元素。
图片懒加载示例

瀑布流

瀑布流布局是一种页面元素等宽不等高,显示参差不齐的多栏布局。绝对定位实现瀑布流的方式是,根据父元素宽度与其中子元素的宽度确定页面显示列数,然后设置一个数组,存储每列所有元素的总高度,且随页面元素增加而实时变动,每次向页面添加元素时先找出当前页面高度最小的列向其中添加。
当时用绝对定位务必每次添加完元素修改父元素的高度,否则父元素高度与内部总高度不等,会影响其后非瀑布流元素。
绝对定位实现瀑布流

瀑布流布局
瀑布流缺点:
  1. 无法得知页面总高度
  2. 用户无法得知自己所在位置
  3. 容易产生浏览疲劳
  4. 增加页面加载负荷

判断元素出现在视野内、判断页面加载到底部

二者判断方式基本相同,但是瀑布流中需要在瀑布流之外的最底端设置一个标志位元素,通过判断该元素是否出现在视野中来判断是否加载到底部
client、offset、scroll值
element.scrollHeight - element.scrollTop === element.clientHeight
$(element).offset().top - $(window).outerHeight === $(window).scrollTop()

上一篇 下一篇

猜你喜欢

热点阅读