Недавно просмотренный ролик Вадима Макеева с аудитом сайта lingualeo заставил задуматься о том, что изображения действительно могут зачастую составлять бОльшую часть трафика. Это может быть пост в блоге с большим количеством картинок, лента новостей и т.д. и т.п. И загрузка множества изображений может существенно снизить производительность сайта особенно на мобильных устройствах. Плюс есть ещё такой момент: если картинка находится где-то там внизу за пределами вьюпорта, то не факт, что пользователь вообще до неё доберётся. И получится, что картинку он загрузил, но не увидел. А зачем же грузить то, что не нужно?

В общем, если у вас есть какой-то контент с большим количеством картинок, то будет очень неплохо использовать технику «ленивая загрузка». Именно этим мы сейчас и займёмся.

Что за ленивая загрузка?

Ленивая загрузка означает, что мы не загружаем изображение до тех пор, пока оно не понадобится. Кстати, так можно делать не только с изображениями. Можно и javascript так загружать, но мы остановимся только на изображениях. Когда же наступает тот момент, в который необходимо начинать загрузку изображения? Очень просто — когда предполагаемое изображение попадает во вьюпорт. Отлично, теперь осталось только поймать этот момент. Мы оставим в стороне жуткие способы с кучей расчетов — они некрасивые и плохо работают. Мы же хотим, чтобы было красиво и хорошо. Поэтому будет использовать Intersection Observer.

Что ещё за Observer?

Это новый браузерный API, который делает именно то, что нам нужно: следит когда элемент попадает во вьюпорт (или пересекается с любым указанным элементом) и готов в этот момент выполнить любую функцию по нашему желанию. Да, браузерная поддержка оставляет желать лучшего. Только пользователи Chrome, Edge и Firefox смогут оценить наши усилия. Но у нас нет цели осчастливить всех, правильно? Мы используем новую технологию, которая облегчит жизнь прогрессивным пользователям. Остальные же будут как и раньше загружать сразу все картинки. Так что всё ок.

Пройдёмте в закрома

Ну хватит разговоров. Давайте уже сделаем что-нибудь на практике. Так как я в основном делаю проекты на Vue.js, то его мы и будем использовать для примера. Пример возьмём прямо из жизни. В проекте, над которым я сейчас работаю, есть раздел в административной части, в котором нужно показать все загруженные в систему изображения. Представляете, да? Страница, на которой 25/30/50 изображений, в зависимости от выбора пользователя. Отличный повод применить Intersection Observer. Для отображения картинок я создам компонент ImageItem.

<template>
  <div class="image">
    <img
      class="image__item"
      :src="source"
      alt=""
    >
  </div>
</template>

Ну тут всё просто и очевидно. Самый обычный тэг <img>, атрибут src которого является входным параметром (aka props) компонента. Раздел script соответственно выглядит так:

export default {
  name: "",
  props: {
    source: {
      type: String,
      required: true
    }
  }
}

В таком виде наш компонент просто будет показывать изображение как обычно. Для ленивой загрузки нам для начала нужно предотвратить загрузку изображений в принципе. Да, чтобы они вообще не загружались. Ведь мы хотим загружать изображение только тогда, когда оно попадает во вьюпорт. И самый простой способ предотвратить загрузку изображения — убрать у него атрибут src. Но нам же в любом случае понадобится адрес, с которого грузить изображение. Т.е. мы всё равно должны как-то сохранить наш входной параметр source. Для этого отлично подойдёт data атрибут. И шаблон компонента будет выглядеть так:

<template>
  <div class="image">
    <img
      class="image__item"
      :data-src="source"
      alt=""
    >
  </div>
</template>

Ну что ж, пол дела сделано. Изображения не загружаются. Осталось всего ничего — при попадании изображения во вьюпорт вернуть ему атрибут src и подставить в него значение из data-src. Получив атрибут src изображение сразу же загрузится. И вот тут наконец-то на сцену выходит наш герой. Так как мы используем Vue.js, то логичнее всего оформить ленивую загрузку в виде пользовательской директивы. Создадим папку directives, а в ней файл lazyImages.js:

export default {
  inserted: el => {
    function loadImage() {
      const imageElement = Array.from(el.children)
          .find(el => el.nodeName === "IMG");
      if (imageElement) {
          imageElement.addEventListener("error", () => console.log("error"));
      imageElement.src = imageElement.dataset.src;
      }
    }

    function handleIntersect(entries, observer) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadImage();
            observer.unobserve(el);
        }
      });
    }

    function createObserver() {
      const options = {
        root: null,
        threshold: "0"
      };
      const observer = new IntersectionObserver(handleIntersect, options);
      observer.observe(el);
    }

    if (window["IntersectionObserver"]) {
      createObserver();
    } else {
      loadImage();
    }
  }
};

Теперь разберём по частям, что происходит. У пользовательской директивы во Vue, как и у компонента, есть хуки. Мы функционал нашей директивы вешаем на хук inserted, так как нам необходимо, чтобы элемент уже присутствовал в DOM.

В функции loadImage мы просто возвращаем изображениям атрибут src, чтобы инициировать загрузку.

За запуск функции loadImage, в свою очередь, отвечает функция handleIntersect. В неё мы передаём набор элементов, за которыми ведётся наблюдение (entries) и экземпляр observer. Как только элемент попадает во вьюпорт (entry.isIntersecting), мы инициируем загрузку (imageLoad) и убираем его из списка наблюдения observer (observer.unobserve(el)).

Сам observer создаётся в функции createObserver.

В итоге логика работы директивы получается такая. Первым срабатывает условие:

if (window["IntersectionObserver"]) {
  createObserver();
} else {
  loadImage();
}

Т.е. если браузер не поддерживает IntersectionObserver, то мы просто грузим картинки. Если же поддерживает, то мы вызываем createObserver, которая устраивает слежку за нашими картинками и загружает их только тогда, когда они попадают во вьюпорт.

Регистрация директивы

Почти готово, осталось совсем немного — нужно зарегистрировать директиву. Для глобальной регистрации достаточно добавить её в файл main.js:

...
import LazyLoadDirective from "./directives/lazyImages";

Vue.directive("lazyload", LazyLoadDirective);
...

Если же мы хотим зарегистрировать директиву локально (ну не нужна она другим компонентам), то в файле компонента прописываем:

import LazyLoadDirective from "./directives/lazyImages";

export default {
  directives: {
    lazyload: LazyLoadDirective
  }
}

Используем директиву

Ну вот наконец и добрались до момента применения директивы на практике. Тут всё предельно просто:

<template>
  <div class="image" v-lazyload>
    <img
      class="image__item"
      :data-src="source"
      alt=""
    >
  </div>
</template>

Ура, мы сделали это 🤘