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

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

261
07.06.2017

Если на странице очень много изображений - это очень плохо для скорости загрузки страниц. Гугловский 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"))

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


Источник: http://php-zametki.ru/javascript-laboratoriya/134-otlozhennaya-zagruzka-izobrazhenij-pri-pomoshhi-javascript.html


Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.


P.S. Обращайтесь ко мне за приобретением лицензий и продлений на 1C-Битрикс "Управление сайтом", лицензий на облачную и коробочную версии Битрикс 24 а также за приобретением и внедрением готовых решений на базе 1С-Битрикс от партнеров. За более подробной информацией свяжитесь со мной любым удобным для вас способом


Комментарии

Еще никто не комментировал данную публикацию. Будьте первыми!

Добавить комментарий

captcha

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