» » «Ленивая» загрузка с помощью Intersection Observer API

 

«Ленивая» загрузка с помощью Intersection Observer API

Автор: admin от 18-03-2020, 07:10, посмотрело: 146

«Ленивая» загрузка с помощью Intersection Observer API


Доброго времени суток, друзья!



В данной статье мы познакомимся с Intersection Observer API, новым мощным инструментом для «ленивой» загрузки изображений и других элементов на странице, поддерживаемым всеми современными браузерами. Мы можем использовать этот инструмент для управления видимостью элементов, определяя предварительную или отложенную загрузку контента нашего DOM.



По мере развития «веба» браузеры поддерживают все больше и больше новых возможностей и API, но кое-что по-прежнему причиняет боль разработчикам — рендеринг DOM. Когда мы начинаем разработку нового приложения, создаем компоненты, продумываем структуру HTML, стилизуем элементы средствами CSS, мы также задумываемся о процессе рендеринга, о том, как наша страница будет выглядеть в целом, и еще о некоторых важных вещах, требующих осторожного обращения и влияющих на рендеринг приложения.



Это, в свою очередь, влияет на то, как мы будем создавать наши элементы, как будет организован наш CSS, какие библиотеки и фреймворки будут использоваться в проекте и т.д. Вот почему рендеринг так важен для разработчиков.

Спецификация
  • Статья про Intersection Observer API на MDN (русский)

  • Статья с примерами на CSS Tricks (английский)

  • Статья с примерами на Envato (английский)

  • Пример бесконечной прокрутки от Google

  • Еще парочка примеров на GitHub



  • Благодарю за внимание.

    Источник: Хабр / Интересные публикации

    Категория: Программирование

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

    Добавление комментария

    Имя:*
    E-Mail:
    Комментарий:
    Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
    Введите два слова, показанных на изображении: *