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

Загрузка изображений на странице иногда может стать камнем преткновения в работе веб-мастера. Бывает так, что страница имеет помимо текстового содержимого еще и большую массу изображений. Например страницы галерей, или страницы каталогов с большим количеством товаров, и это вовсе не признак того, что веб-мастер не знаком с понятием постраничной навигации. Иногда руководство сайта хочет иметь много изображений товаров, представленных на какой то одной из страниц. JavaScript функция, представленная здесь, добавит вам немного контроля над загрузкой изображений на вашей странице. И, да. Как обычно, обходимся без jQuery :)

Основная идея реализации отложенной загрузки изображений

Основная идея заключается в том, что все необходимые данные для загрузки изображения, а именно путь к изображению мы будем хранить в самом теге 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:

Тем кто плотно сидит на jQuery, возможно будет интересно, как получать доступ к атрибутам data-* из нативного JavaScript: Использование data-* атрибутов

    /**
     * @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;
                }
            }
        };
    }

Подключение отложенной загрузки изображений

Скрипт отложенной загрузки изображений должен располагаться в теге head страницы!

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

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

И вуаля, наши изображения представляются пользователю. Надеюсь кому пригодится. Жду ваших комментариев :)