Вот строка из шаблона, где задействована ленивая загрузка изображения
Код: Выделить всё
<img class="lazy" data-src="{$author->image|resize:320:500:false:$config->resized_authors_dir}" src="{$rootUrl}/design/{get_theme}/images/xloading.gif" alt="{$author->name}" />
1) Добавляем класс lazy
2) Добавляем атрибут data-src со ссылкой на реальное изображение
3) Атрибут scr содержит плейсхолдер, который загружается с сервера перед реальным изображением. В данном примере разработчики используют gif спиннер как плейсхолдер. Плейсхолдер-изображение должно быть максимально легким. Я бы порекомендовал svg формат
Можно обойтись и одним data-src, но тогда сайт не будет соответствовать требованиям W3C
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)