前端html+js实现懒加载的两种常见方法
忘记啥原因了，对图片懒加载有点好奇，于是乎查了一下有哪些方法，在这里记录下来
使用H5标准内置标签loading
参考：vue 实现懒加载_vue 懒加载-CSDN博客
注意事项：需要设置图片的宽高，尽量设置高度大一点，这样效果明显一点。不设置浏览器将不知道实际占位大小，会直接把图像加载过来。
代码示例：
<!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" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报2.png" alt="aaaa" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报3.png" alt="aaaa" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报4.png" alt="aaaa" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报5.png" alt="aaaa" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报6.png" alt="aaaa" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报7.png" alt="aaaa" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报8.png" alt="bbb" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报9.png" alt="bbb" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报10.png" alt="ccc" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报11.png" alt="ccc" loading="lazy"><img class="ttt" data-src="./imgs/亿元机构海报12.png" alt="ccc" loading="lazy"></div><script>const observer = new IntersectionObserver((entries,observer) => {// entries 是当前出现在视图的所有元素的数组entries.forEach( item => {// H5 使用 dataset.src 访问原始dom上面的data-xxx属性item.target.src = item.target.dataset.src;observer.unobserve(item.target);})})document.querySelectorAll('img[data-src]').forEach(img => {observer.observe(img)})</script>
</body></html>