Web-дизайн 
No Comments Отложенная загрузка изображений при помощи JavaScript
Отложенная загрузка изображений. Подгрузка изображений при прокрутке. Как ускорить загрузку сайта, если много фотографий (картинок)?
Думаю, многие любители разместить на своем сайте море фотографий сталкивались с проблемой длительной загрузки страницы, в конце-концов, отталкивающей посетителей, не желающих "часами" смотреть в пустой монитор, пока грузятся сотни картинок. А если они еще и много "весят", то пиши-пропало.
Эта проблема не обошла и меня на одном из сайтов, где я люблю выкладывать много фотографий о путешествиях. Но стоило попытаться найти в сети полезную информацию по данному вопросу, как я столкнулся с таким бредом, что в очередной раз убедился - найти стоящую информацию в Сети катастрофически сложно.
По запросам "отложенная загрузка фотографий" и пр. я не нашел ни одного нормального варианта - все какая-то невероятная экзотика: какие-то специальные плагины, php-запросы к серверу и прочая ерунда. Не обладая большими познаниями в программировании, я чувствовал, что задача - наипростейшая, но самостоятельно решить не мог.
В какой-то момент я едва не плюнул на это дело, пока...... пока в самый последний момент не натолкнулся на сайт "PHP-заметки. Путевые заметки программиста", где автор предлагает наипростейшее решение (правда, для тех, кто знаком с JavaScript)
Основная идея реализации отложенной загрузки изображений
Основная идея заключается в том, что все необходимые данные для загрузки изображения, а именно путь к изображению мы будем хранить в самом теге 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;
}
}
};
}
Подключение отложенной загрузки изображений
Скрипт отложенной загрузки изображений должен располагаться в теге head страницы!
delayPics - принимает лишь один аргумент - массив изображений, загрузку которых нам надо отложить. Вызов функции имеет следующий вид:
// Используем getElementsByClassName для выбора картинок по имени класса
delayPics (document.getElementsByClassName("delay"));
Что получилось
В теге <head> нам остается прописать вот такой скрипт, не забыв к изображениям добавит атрибут data-src, и наслаждаться быстрой загрузкой!
<script type="text/javascript"/>
// Это скрипт отложенной загрузки изображений. Используем getElementsByClassName для выбора картинок по имени класса
delayPics (document.getElementsByClassName("delay"));
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;
}
}
};
}
</script>
По материалам сайта "PHP-заметки. Путевые заметки программиста"