忘记啥原因了，对图片懒加载有点好奇，于是乎查了一下有哪些方法，在这里记录下来
使用H5标准内置标签loading
注意事项：需要设置图片的宽高，尽量设置高度大一点，这样效果明显一点。不设置浏览器将不知道实际占位大小，会直接把图像加载过来。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片加载</title>
<style >
.ttt {
width:100px;
height: 500px;
display: block;
}
</style>
</head>
<body>
<div id="root" style="width: 100%;height: 100%;">
<img class="ttt" src="./imgs/亿元机构海报1.png" alt="aaaa" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报2.png" alt="aaaa" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报3.png" alt="aaaa" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报4.png" alt="aaaa" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报5.png" alt="aaaa" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报6.png" alt="aaaa" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报7.png" alt="aaaa" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报8.png" alt="bbb" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报9.png" alt="bbb" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报10.png" alt="ccc" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报11.png" alt="ccc" loading="lazy">
<img class="ttt" src="./imgs/亿元机构海报12.png" alt="ccc" loading="lazy">
</div>
</body>
</html>使用JS的API——IntersectionObserver
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
参考文章1（推荐）：https://cloud.tencent.com/developer/article/1528620
参考文章2（包含实例）：IntersectionObserver一分钟学会，超级简单-CSDN博客
注意事项：注意搞清楚里面各个变量代表的含义即可
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用js IntersectionObserver API进行懒加载</title>
<style>
.ttt {
/* width:100px; */
height: 500px;
display: block;
}
</style>
</head>
<body>
<div id="root" style="width: 100vw;height: 100vh">
<img class="ttt" data-src="./imgs/亿元机构海报1.png" alt="aaaa">
<img class="ttt" data-src="./imgs/亿元机构海报2.png" alt="aaaa">
<img class="ttt" data-src="./imgs/亿元机构海报3.png" alt="aaaa">
<img class="ttt" data-src="./imgs/亿元机构海报4.png" alt="aaaa">
<img class="ttt" data-src="./imgs/亿元机构海报5.png" alt="aaaa">
<img class="ttt" data-src="./imgs/亿元机构海报6.png" alt="aaaa">
<img class="ttt" data-src="./imgs/亿元机构海报7.png" alt="aaaa">
<img class="ttt" data-src="./imgs/亿元机构海报8.png" alt="bbb">
<img class="ttt" data-src="./imgs/亿元机构海报9.png" alt="bbb">
<img class="ttt" data-src="./imgs/亿元机构海报10.png" alt="ccc">
<img class="ttt" data-src="./imgs/亿元机构海报11.png" alt="ccc">
<img class="ttt" data-src="./imgs/亿元机构海报12.png" alt="ccc">
</div>
<script>
const observer = new IntersectionObserver((entries, observer) => {
// entries 是当前出现在视图的所有元素的数组
entries.forEach(item => {
if (item.isIntersecting) {
// H5 使用 dataset.src 访问原始dom上面的data-xxx属性
item.target.src = item.target.dataset.src;
observer.unobserve(item.target);
}
})
})
console.log('xxxxx', document.querySelectorAll('img[data-src]'));
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img)
})
</script>
</body>
</html>