<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="content"></div>
<div class="load">触发......</div>
</body>
<script>
const content = document.querySelector(".content");
const load = document.querySelector(".load");
num = 0;
const io = new IntersectionObserver(
(entrys) => {
entrys.forEach((entry) => {
if (!entry.isIntersecting) return;
loadMore();
});
},
{
rootMargin: "0px 0px 10px 0px",
}
);
// 触发监听
io.observe(load);
// 同理也可实现分页、组件、动画等各种可加载的元素
function loadMore() {
for (let i = 1; i < 13; i++) {
let div = document.createElement("div");
div.style = `height:200px;width:200px;border:1px solid #fff;`;
num++;
div.innerHTML = `<img src="https://picsum.photos/200?t=${i}" alt="" />`;
content.appendChild(div);
}
}
</script>
</html>另附上随机图片地址一份：https://picsum.photos/
924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
