Lazy Load на лендинг

Лендинг представляет собой одностраничный сайт. У него вся информация расположена на одной странице в виде секций. Если одна либо несколько секций содержит большое количество изображений, то для увеличения скорости загрузки сайта целесообразно использовать ленивую загрузку изображений (lazy load). Эта техника заключается в том, что при загрузке страницы помеченные изображения не прогружаются, вместо них показывается заглушка. Когда же пользователь прокручивает страницу до картинки, то вместо заглушки с сервера загружается изображение. Таким приемом можно существенно сэкономить вес загружаемой страницы.

Подключаем скрипт ленивой загрузки:

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes.min.js" async=""></script>

Для этого необходимо картинки обернуть в div с классом img

<div class="img"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="img/miniimg/etap11/7-main.jpeg" alt="Этапы строительства" /></div>

При этом путь к изображению прописывается в атрибуте data-src. А в src путь к белому пикселю, который будет загружен сразу. При прокрутке к изображению скрипт поменяет атрибут значение src на data-src в итоге загрузится необходимая картинка. Вот этот скрипт нужно добавить в конец страницы перед /body

<script>
    function loadimg(){
        var $images = $('.img');

        $images.each(function(){
            var $img = $(this),
                    src = $img.attr('data-src');

            $img
                    .on('load',imgLoaded($img[0]))
                    .attr('src',src);
        });
    };


    $(window).load(function(){
        loadimg();
    };
</script>

Естественно, перед вызовом скрипта должен быть подключен jquery

*Перед тем как найти данное решение пришлось перерыть массу статей, но данное решение понравилось своей простотой и понятностью.