关于懒加载数据的获取

需求是：想要在页面中拿到懒加载的数据和图片，

就需要通过scroll滚动来模拟用户的操作

来把一些懒加载的数据 真正的加载出来，

最后去拿数据就可以了，

最后拿到数据后，需要自动回到顶部

难点1：懒加载的数据，没有加载的情况下

盒子的高度是没有撑开的，也就是说我们滚动的距离没法确认

难点2：懒加载的时候 不确定 啥时候能确定懒加载的数据加载完了？

需要某种机制来默认判断

需求明确了之后，思路：

页面加载进来之后，先把scroll的滚定值调为999999

然后监听window的scroll事件，

这里有一个技巧，

当没有滚动空间的时候，

scroll的滚动事件即为无效滚动，

然后在我们的window的scroll事件当中

写一个防抖，

当超过1、2秒时间的无限滚动时，

就视为没有更多懒加载的数据了，

此时回到顶部，并移除window的scroll事件

具体代码如下：

function scrollForProduct() {
let timerForDebounce = null;

function scrollFunc() {

console.log("scroll..");
if (timerForDebounce) clearTimeout(timerForDebounce);

timerForDebounce = setTimeout(() => {
  console.log("如果出现1秒钟的无效scroll 就回到顶部,并清除scroll事件");
  $("body,html").stop();
  $("body,html").animate({ scrollTop: 0 }, 1);
  // 清除scroll事件
  window.removeEventListener("scroll", scrollFunc, false);
}, 1000);

}
window.addEventListener("scroll", scrollFunc, false);

  先把scroll的滚定值调为20万
$("body,html").animate({ scrollTop: 200000 }, 15000);
}

复制代码
作者: Bill 本文地址: http://biaoblog.cn/info?id=1632385041705

版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！