一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    关于懒加载数据的获取

    技术 158 2021-09-23 16:17

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

    就需要通过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);
        }
    

    文章评论

    评论列表(0