Как сделать так, чтобы картинка подгружалась с сервера только тогда, когда пользователь до нее долистал?

<img src="image.jpg" loading="lazy" alt="Пример">

const img = document.querySelector('img.lazy');
const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			entry.target.src = entry.target.dataset.src;
			observer.unobserve(entry.target);
		}
	});
});
observer.observe(img);

<img data-src="real-image.jpg" class="lazy" alt="Ленивая загрузка">