增加下载数据到json

2025-07-23 23:52:30 +08:00
parent 9f998fc3e7
commit fe9c4137d5
10 changed files with 460 additions and 103 deletions
--- a/downKsVideo/test.html
+++ b/downKsVideo/test.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="./lazyload.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        font-size: 0;
+        line-height: 0;
+      }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      ul li {
+        width: 20%;
+        background: #000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+      ul li .lazy {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <ul></ul>
+  </body>
+  <script>
+    let page = "";
+    // 获取当前页面的滚动高度
+    let currentTop = document.documentElement.scrollTop,
+      lload = null,
+      scrollLock = false,
+      handlerId = null,
+      ul = document.querySelector("ul");
+
+    let getHttpData = async () => {
+      let res = await fetch(`http://127.0.0.1:3000?page=${page}`);
+      let data = await res.json();
+      scrollLock = false;
+      render(data);
+    };
+
+    // 渲染页面
+    let render = (data) => {
+      let { feeds, pcursor } = data;
+      console.log(feeds, pcursor);
+      page = pcursor;
+
+      let index = 0;
+
+      function add() {
+        const li = document.createElement("li");
+        const video = document.createElement("video");
+        video.className = "lazy";
+        video.preload = "metadata";
+
+        video.poster = feeds[index].photo.coverUrl;
+        video.dataset.src = feeds[index].photo.photoUrl;
+
+        video.muted = true;
+        video.autoplay = true;
+
+        li.appendChild(video);
+        ul.appendChild(li);
+
+        index += 1; //修改图像的位置
+
+        if (index < feeds.length) {
+          //在动画没有结束前，递归渲染
+          requestAnimationFrame(add);
+        } else {
+          initLazyLoad();
+          if (currentTop == 0) {
+            autoLoad();
+          }
+        }
+      }
+
+      requestAnimationFrame(add);
+    };
+
+    let initLazyLoad = () => {
+      lload = new LazyLoad({
+        // use_native: true,
+        threshold: 0,
+        elements_selector: ".lazy",
+      });
+    };
+
+    let autoLoad = () => {
+      var setScroll = () => {
+        scroll(0, (currentTop += 2));
+        handlerId = requestAnimationFrame(setScroll);
+      };
+
+      handlerId = requestAnimationFrame(setScroll);
+
+      //   // 设置一个计时器，每隔200ms执行一次滚动操作
+      //   var time = setInterval(() => {
+      //     // 使用 window.scroll 方法滚动页面，currentTop 增加 2 实现向下滚动
+      //     window.scroll(0, (currentTop += 1));
+      //   }, 10);
+    };
+
+    // 当用户点击页面时，停止自动滚动
+    document.onclick = function () {
+      cancelAnimationFrame(handlerId);
+      handlerId = null
+    };
+
+    document.onkeydown = function (e) {
+      //对整个页面监听
+      var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
+      //判断如果用户按下了回车键（keycody=13）
+      if (keyNum == 13 && handlerId == null) {
+        autoLoad();
+      }
+    };
+
+    window.onscroll = function () {
+      //文档内容实际高度（包括超出视窗的溢出部分）
+      var scrollHeight = Math.max(
+        document.documentElement.scrollHeight,
+        document.body.scrollHeight
+      );
+
+      //滚动条滚动距离
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+
+      //窗口可视范围高度
+      var clientHeight =
+        window.innerHeight ||
+        Math.min(
+          document.documentElement.clientHeight,
+          document.body.clientHeight
+        );
+
+      if (clientHeight + scrollTop >= scrollHeight - 150) {
+        if (scrollLock == false) {
+          console.log("满足");
+          scrollLock = true;
+          getHttpData();
+        }
+      }
+    };
+
+    getHttpData();
+  </script>
+</html>