图片懒加载的原理：
通过延迟加载图片，只有当图片即将进入可视区域时再进行加载，以优化网页加载速度和性能。
具体的实现步骤如下：
- 将待加载的图片的
src属性设置为空或者一个占位符，而不是真实的图片链接。- 监听页面滚动事件或者其他触发条件，比如图片容器进入可视区域。
- 当触发条件满足时，获取到所有需要进行懒加载的图片元素。
- 遍历这些图片元素，将之前设置的空或占位符
src属性替换为真实的图片链接。- 图片开始加载并显示在页面上。
通过这种方式，可以避免一次性加载大量图片，提高页面的加载速度。同时，在用户滚动页面时，可以按需加载图片，减少不必要的网络请求和资源浪费。
<img class="lazy" data-src="image.jpg" src="placeholder.jpg"> // 获取所有具有.lazy类的图片元素 const lazyImages = document.querySelectorAll('.lazy'); // 监听滚动事件 window.addEventListener('scroll', lazyLoad); function lazyLoad() { // 遍历每个需要进行懒加载的图片 for (const lazyImage of lazyImages) { if (elementInViewport(lazyImage)) { // 将data-src属性的值赋值给src属性，触发图片加载 lazyImage.src = lazyImage.dataset.src; // 移除.lazy类，避免重复加载 lazyImage.classList.remove('lazy'); } } } function elementInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }
通过获取具有.lazy类的图片元素集合，并使用scroll事件监听用户滚动行为。当图片进入可视区域时，将data-src属性的值赋给src属性，触发图片加载。
