165 lines
4.0 KiB
HTML
165 lines
4.0 KiB
HTML
<!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:3030?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;
|
||
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>
|