1.原理
懒加载的原理是通过监听用户的浏览行为，当用户滚动到可视区域内时，再进行资源的加载。这样可以避免一次性加载过多的资源，从而减少页面的加载时间和带宽消耗。
2.主要使用场景
懒加载适用于图片较多，页面列表较长(长列表)的场景中。
3.懒加载的优点
- 减少首页加载时间：初始页面只加载必要的内容，而不需要等待所有资源都加载完成。
- 提高用户体验：页面加载更快，用户可以更快地交互和浏览内容。
- 节约带宽消耗：只加载用户需要的内容，减少不必要的带宽消耗。
4.注意
图片懒加载的核心点包括以下几个方面：
-
监听滚动事件：通过监听用户的滚动事件，判断页面上的图片是否进入了可视区域。一旦图片进入可视区域，就触发加载操作。
-
设置占位符：在页面加载时，可以先为图片设置一个占位符，通常是一个占位图或者是图片的尺寸占位。这样可以保持页面的布局稳定，避免因图片加载导致页面抖动。
-
动态加载图片：当图片进入可视区域时，通过 JavaScript 动态创建 img 元素，并将图片的真实地址赋值给该元素的 src 属性。这会触发浏览器加载图片资源。
-
懒加载优化：为了更好地优化懒加载效果，可以考虑延迟加载图片的时间，即不是在图片完全进入可视区域时立即加载，而是延迟一小段时间，以避免过于频繁地触发加载操作。
-
处理异常和兼容性：在实现图片懒加载时需要注意处理异常情况，比如图片加载失败、图片资源无法访问等情况。此外，考虑到不同浏览器和设备的兼容性，可使用现有的第三方库或框架，以便更方便地实现图片懒加载功能。
另外需注意：懒加载并非适用于所有场景。对于一些重要的资源（如主要内容、重要的功能组件等），应当优先加载，以确保用户能够尽快访问到核心内容。而对于一些非必要资源（如底部的图片、辅助功能组件等），可以采用懒加载的方式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lazy Load Images Example</title><style>.image-container {width: 300px;height: 300px;margin: 20px;border: 1px solid #ccc;}.image {width: 100%;height: 100%;object-fit: cover;}.kong-place{height: 1000px;}</style>
</head>
<body><div class="kong-place"></div><div class="image-container"><img data-src="./images/1683166212929-6cc8b8b6-2c4a-4927-8226-65d1f1f4f337.gif" class="image" alt="Image 1"></div><div class="image-container"><img data-src="./images/logo.png" class="image" alt="Image 2"></div><div class="image-container"><img data-src="./images/count.png" class="image" alt="Image 3"></div><script>// 当文档加载完成后执行的函数document.addEventListener("DOMContentLoaded", function() {// 查找所有带有 data-src 属性的图片元素var lazyImages = document.querySelectorAll('img[data-src]');// 创建一个 IntersectionObserver 实例来观察元素的可见性var observer = new IntersectionObserver(function(entries, observer) {// 对于每个可见性变化的条目执行回调函数entries.forEach(function(entry) {// 如果条目可见if (entry.isIntersecting) {// 获取当前懒加载的图片元素var lazyImage = entry.target;// 将 data-src 属性的值赋给 src 属性，触发图片加载lazyImage.src = lazyImage.dataset.src;// 加载完成后移除 data-src 属性，避免重复加载lazyImage.removeAttribute('data-src');// 停止观察当前图片元素，避免重复处理observer.unobserve(lazyImage);}});});// 遍历所有图片元素，开始观察可见性变化lazyImages.forEach(function(lazyImage) {observer.observe(lazyImage);});
});</script>
</body>
</html>
