图片懒加载的原理如下：

1. 在网页中将需要懒加载的图片的src属性替换为一个占位符，例如一个空白的透明图片或者一个loading图标。

2. 使用JavaScript监听滚动事件，判断用户是否滚动到需要显示图片的位置。

3. 当用户滚动到相应位置时，获取图片的真实地址，将其赋值给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属性，触发图片加载。