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

Question

Используют ленивую загрузку (lazy loading). Для этого добавляют атрибут loading="lazy" в <img> или используют Intersection Observer в JavaScript.

YeaHub · Accepted Answer

HTML-атрибут loading="lazy" (поддерживается в современных браузерах): Пример

Браузер сам загрузит изображение, когда оно появится в зоне видимости.Intersection Observer API (если нужен больший контроль):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);В HTML разметке: Ленивая загрузка