Сделал через npm пакет vanilla-lazyload

Докуменация:

https://verlok.github.io/vanilla-lazyload

Реализация

Установка

npm install vanilla-lazyload

Подключаем

// src/js/utils/lazyload.js
import LazyLoad from "vanilla-lazyload";
const lazyload = () => {
	const lazyLoadInstance = new LazyLoad({
		elements_selector: ".lazyload",
		threshold: 100
	});
};

export default lazyload;

И в главном файле вызываем.

// src/js/app.js
import layout from './layout/layout';
import header from './components/header';
import contacts from './components/contacts';
import { documentReady, pageLoad } from './utils';
import lazyload from "./utils/lazyload";

const app = () => {
	layout();

	pageLoad(() => {
		lazyload();
		contacts();
		header();
	});
};

// -------------------  init App
documentReady(() => {
	app();
});
// -------------------  init App##

data-src вместо src

<img alt="A lazy image" class="lazy" data-src="lazy.jpg" />

Если оставить реальный src, браузер загрузит сразу и библиотека будет бессмысленной.

Для vanilla-lazyload тебе нужно только:

• убрать реальный src
• перенести его в data-src
• добавить класс lazyload
• оставить width/height

<div class="model_card_image">
                <img
                    class="lazyload"
                    data-src="<?php echo esc_url($main_photo); ?>"
                    alt="<?php the_title_attribute(); ?>"
                >
            </div>

Когда долистали до картинки, то добавляется класс “entered”.

Картинки теперь постепенно подгружаются: