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