[Malleys]

все src для img заменил на data-src.

Теперь это у вас не картины (точней элемент находится в таком состояний, что он не представляет картинку) и если, что-то пойдёт не так, то совсем их не будет видно. Совсем!

Вам стоит добавить изображениям src указывающий на изображение-заглушку.

src предназначен для того, чтобы указать путь к полной картинке.

Вопрос в том, чтобы эта картинка показывалась только тогда, когда окажется на экране пользователя. Но как отличить картинку, которая загрузилась, от картинки, которая ещё не загрузилась? Ведь вы можете захотеть показывать вместо неё заглушку!

Картинка может быть определена так <img src="pic.jpg">, но можно ведь, например, в search params указать, что это картинка для ленивой загрузки! <img src="pic.jpg?lazy"> И тогда можно сказать, что pic.jpg?lazy это заглушка, а удалив lazy мы получим настоящую pic.jpg, когда она попадёт в область видимости!

Вот пример, реализованный при помощи отслеживания запросов, если в search params есть lazy, то можно даже не делать запрос на сервер, ведь заглушка может быть выполнена при помощи CSS или SVG. Попадёт ли в область видимости узнаётся при помощи Intersection Observer API. Пример... https://plnkr.co/edit/PxM3Poomc4JfXT5BlnyN?p=preview