Отложенная загрузка изображений при помощи 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"))

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

Количество показов: 4497
07.06.2017

Возврат к списку

Если вам была полезна статья можете отблагодарить автора:
Ethereum:

0x16Df809287333C49D3A237296C6248A6c08702Bc

Разработка сайта

Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...

Сопровождение сайта

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

Работы по сайту

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