忘记啥原因了,对图片懒加载有点好奇,于是乎查了一下有哪些方法,在这里记录下来
使用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>