增加下载数据到json

downKsVideo/index.html

@@ -4,6 +4,7 @@
     <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;
@@ -24,8 +25,10 @@
         justify-content: center;
         cursor: pointer;
       }
-      ul li img {
+      ul li .lazy {
+        display: block;
         width: 100%;
+        height: 100%;
       }
     </style>
   </head>
@@ -33,29 +36,129 @@
     <ul></ul>
   </body>
   <script>
-    fetch("http://127.0.0.1:3000/")
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
-        let { feeds, pcursor } = data;
-        let html = feeds
-          .map((e) => {
-            return `
-             <li>
-                <img src="${e.photo.coverUrl}" alt="">
-            </li>
-            `;
-          })
-          .toString()
-          .replaceAll(",", "");
+    let page = "";
+    // 获取当前页面的滚动高度
+    let currentTop = document.documentElement.scrollTop,
+      lload = null,
+      scrollLock = false,
+      handlerId = null,
+      ul = document.querySelector("ul");
 
-        document.querySelector("ul").innerHTML += html;
+    let getHttpData = async () => {
+      let res = await fetch(`http://127.0.0.1:3030?page=${page}`);
+      let data = await res.json();
+      scrollLock = false;
+      render(data);
+    };
 
-        document.querySelectorAll("ul li").forEach((e) => {
-          e.onmouseover = () => {
-            console.log("e: ", e);
-          };
-        });
+    // 渲染页面
+    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;
+        video.loop = 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>