懒加载（Lazy Loading），也称为延迟加载，是一种技术，它可以先加载当前页面可视区域的内容，当用户滚动到页面的其他部分时再去加载其他部分的内容，从而减轻页面加载压力，提高页面性能和用户体验。下面是用 JavaScript 实现懒加载的代码：
HTML 代码：
<div class="container"> <img data-src="image1.jpg" class="lazy"> <img data-src="image2.jpg" class="lazy"> <img data-src="image3.jpg" class="lazy"> <img data-src="image4.jpg" class="lazy"> <img data-src="image5.jpg" class="lazy"> <img data-src="image6.jpg" class="lazy"> </div>
JavaScript 代码：
window.addEventListener('DOMContentLoaded', function() { let images = document.querySelectorAll('.lazy'); function lazyLoad() { images.forEach(image => { if (image.offsetTop < window.innerHeight + window.pageYOffset && !image.src) { image.src = image.dataset.src; } }); } window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); window.addEventListener('orientationchange', lazyLoad); lazyLoad(); });
在上面的示例中，我们首先获取了所有带有 lazy 类的图像元素，然后定义了一个函数 lazyLoad()，这个函数遍历了图片元素，如果图片元素的顶部距离小于当前可视区域的高度加上滚动距离，并且图片元素还没有加载过，那么就将图片元素的 data-src 属性赋值给它的 src 属性，实现了懒加载的效果。
最后，我们给 window 对象添加了三个事件监听器：scroll、resize 和 orientationchange。这几个事件监听器都会触发 lazyLoad() 函数，以便在滚动、调整大小或旋转设备时及时加载图片。
