simplify the life

feed 流数据请求时机的两个思路

最近 SF 首页 进行了大改版,效果如下:

其他地方都没什么难点,中间的 feed 流思考了不少时间,效果需要类似微博或者知乎 feed 流。之前一直没有做过类似的功能,现总结两个方案。

方案一

方案一也是目前线上方案,核心代码如下:

$(document).scroll(() => {
  if ($(document).scrollTop() + $(window).height() + 500 > $('.news-list').height() + $('.news-list').offset().top) {      
    // to fetch the data
  }
})

500 为阈值,也就是提前 500px 去请求数据。$(document).scrollTop() 为滚条卷去的高度,$(window).height() 为视口高度,$('.news-list').height() 为 feed 流区域高度,$('.news-list').offset().top 为 feed 流区域和顶部的距离。

方案二

这个功能让我联想到了之前做图片延迟记载的功能,没错,翻阅了 教你实现图片的惰性加载,看到了代码:

if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
  // todo
}

让我们来看看它的判断。obj.getBoundingClientRect().top 是 obj 距离视口顶部的距离,需要和方案一 $('.news-list').offset().top 做下对比,前者是和视口顶部的距离,后者是和顶部(包括滚条卷去的长度)的距离,显然后者可能会比前者大很多;而 document.documentElement.clientHeight 其实就是视口的高度,同 $(window).height() 。

如果要用类似思路处理 feed 流,也是可以的。首先要找到这个 obj,这个 obj 可以是 feed 流区域($('.news-list'))中最后一个元素,也可以是 feed 流区域($('.news-list'))刚好下面的元素(SF 首页逻辑下目前即 footer),然后对其做滚动监听即可。

posted on 2018-01-07 13:43 韩子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News