Отложенная загрузка изображений при помощи JavaScript

Если на странице очень много изображений - это очень плохо для скорости загрузки страниц. Гугловский pagespeed при проверке сайта в 90% случаев находит самую большую проблему именно в изображениях. Пробовал использовать скрипты оптимизации - не помогают. pagespeed настроенный на сервере - слишком сильно ухудшает качество. Решением проблемы стал скрипт отложенной загрузки изображений.

Основная идея заключается в том, что все необходимые данные для загрузки изображения, а именно путь к изображению мы будем хранить в самом теге img изображения, но не в атрибуте src, а в атрибуте data-src. Вдобавок, в каждый тег изображения, загрузку которого требуется отложить мы добавим класс, например delay, что бы потом была возможность доступа к нему из JavaScript.

<img class="delay" width="400px" height="400px" data-src="/путь/к/изображению.png" />

Если не указать атрибуты width и height в теге изображения при загрузке страницы, будет ломаться верстка. Так же советую обязательно прописать атрибут alt, (но это вам и так любой сеошник скажет) пока все хозяйство будет грузиться пользователь будет их лицезреть.

Сама функция отложенной загрузки изображений - простая и состоит буквально из нескольких строк кода. В функции проверяется свойство документа document.onreadystatechange - которое изменяется по мере загрузки страницы, и как только оно становиться "complete" - это означает что документ загружен. Сразу после этого функция обходит массив изображений, который мы ей передали, и у каждого элемента просто переписывает значение пути к изображению из атрибута data-src в атрибут src:

/**
     * @param {DOMNodeList|HTMLElement[]} набор html-элементов-картинок.
     */
    function delayPics (picsArray) {
        /* Это событие происходит каждый раз 
            при изменении onreadystatechange */
        document.onreadystatechange = function(e) {
            /* Когда документ загрузился - начинаем 
                загрузку изображений: */
            if ("complete" === document.readyState) {
                for (var i = 0; i < picsArray.length; i +=1) {
                    /* Просто переписываем путь к изображению из 
                        одного атрибута в другой: */
                    picsArray[i].src = picsArray[i].dataset.src;
                }
            }
        };
    }

Данная функция принимает лишь один аргумент - массив изображений, загрузку которых нам надо отложить. Вызов функции имеет следующий вид:

// Используем getElementsByClassName для выбора картинок по имени класса
    delayPics (document.getElementsByClassName("delay"))

Готово! Теперь изображения будут подгружаться после загрузки всего сайта. Единственный недостаток - эти изображения не будут индексироваться поисковиками. Но это решается добавлением в карту сайта изображений (мой модуль генерации карты сайта это умеет делать)