前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >关于懒加载数据的获取

关于懒加载数据的获取

作者头像
biaoblog.cn 个人博客
发布2022-08-11 19:38:41
发布2022-08-11 19:38:41
52000
代码可运行
举报
运行总次数:0
代码可运行

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

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

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

最后去拿数据就可以了,

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

难点1:懒加载的数据,没有加载的情况下

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

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

需要某种机制来默认判断

需求明确了之后,思路:

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

然后监听window的scroll事件,

这里有一个技巧,

当没有滚动空间的时候,

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

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

写一个防抖,

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

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

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

具体代码如下:

代码语言:javascript
代码运行次数:0
复制
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);
    }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档