[Malleys]

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

Нет, конечно же! Это может быть и динамически сгенерированное изображение. Это не важно, подойдёт любой ресурс, который разрешается как изображение поддерживаемое браузером!

Если на странице есть <img src="pic.jpg"> и <img src="pic.jpg?lazy">, то браузер сразу начнёт скачивать картинки, но мы можем отслеживать событие fetch, и следовательно решать, нужно ли, что-то скачивать с сервера или нет. Если в пути содержится параметр lazy, то мы можем сами составить ответ на этот запрос. Например, это может быть пустая SVG картинка.

const image = new Response(`
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
	</svg>
`, {
	headers: { "Content-Type": "image/svg+xml" }
});

addEventListener("fetch", function(event) {
	const { searchParams } = new URL(event.request.url);

	if(searchParams.has("lazy")) {
		event.respondWith(image.clone());
	}
});

Этот код в отдельном файле(mediator.js), подключается к приложению так...

<script>
	navigator.serviceWorker.register("mediator.js").then(console.log, console.error);
</script>

Это так, пример, а так там может быть своя логика, что делать при успешной регистрации или отторжении.

Весь прикол в том, что те картинки, которые имеют параметр lazy, это будут пустые SVG-картинки. И тут нужно отслеживать местоположение этих картинок, как только они оказываются в области видимости пользователя, удаляется параметр lazy, браузер опять начинает запрос, но поскольку в обработчике события нет подходящего условия, то будет скачана картинка с сервера.

Я что-то упустил или вы действительно описали не очень хороший метод реализации?

Да, может быть вы не заметили Service Worker. Вообще это круто, да? Дописываешь lazy и оно не загружается, а потом убираешь из адреса lazy и оно загружается. И вёрстка простая <img src="pic.jpg?lazy">, а не <img class="lazy-loading-image" data-src="pic.jpg"> и пр. обёртки с <template>. Вообще, конечно, можно сделать так, чтобы параметр lazy не приписывать. Вообще супер! Конечно при помощи Service Worker можно сделать более интересные вещи!