Вернуться к уроку

Загрузка видимых изображений

важность: 4

Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы.

С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на «макеты».

Вместо такого изображения:

<img src="yozhik.jpg" width="128" height="128">

Стоит вот такое:

<img src="1.gif" width="128" height="128" realsrc="yozhik.jpg">

То есть настоящий URL находится в атрибуте realsrc (название атрибута можно выбрать любое). А в src поставлен серый GIF размера 1x1, и так как width/height правильные, то он растягивается, так что вместо изображения виден серый прямоугольник.

При этом, чтобы браузер загрузил изображение, нужно заменить значение src на то, которое находится в realsrc.

Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы. Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки.

Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки.

Напишите код, который при прокрутке окна загружает ставшие видимыми изображения.

То есть, как только изображение попало в видимую часть документа – в src нужно прописать правильный URL из realsrc.

Пример работы вы можете увидеть в iframe ниже, если прокрутите его:

Особенности реализации:

  • При начальной загрузке некоторые изображения должны быть видны сразу, до прокрутки. Код должен это учитывать.
  • Некоторые изображения могут быть обычными, без realsrc. Их код не должен трогать вообще.
  • Также код не должен перегружать уже показанное изображение.
  • Желательно предусмотреть загрузку изображений не только видимых сейчас, но и на страницу вперед и назад от текущего места.

P.S. Горизонтальной прокрутки нет.

Открыть песочницу для задачи.

Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их.

Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого – указать ее вызов в скрипте под страницей, вот так:

...страница...

function isVisible(elem) {

  var coords = elem.getBoundingClientRect();

  var windowHeight = document.documentElement.clientHeight;

  // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
  var topVisible = coords.top > 0 && coords.top < windowHeight;
  var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
}

showVisible();
window.onscroll = showVisible;

При запуске функция ищет все видимые картинки с realsrc и перемещает значение realsrc в src. Обратите внимание, т.к. атрибут realsrc нестандартный, то для доступа к нему мы используем get/setAttribute. А src – стандартный, поэтому можно обратиться по DOM-свойству.

Функция проверки видимости isVisible(elem) получает координаты текущей видимой области и сравнивает их с элементом.

Для видимости достаточно, чтобы координаты верхней(или нижней) границы элемента находились между границами видимой области.

В решении также указан вариант с isVisible, который расширяет область видимости на ±1 страницу (высота страницы – document.documentElement.clientHeight).

Открыть решение в песочнице.