Информационный портал по безопасности » Программирование » «Ленивая» загрузка с помощью Intersection Observer API

 

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

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

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


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



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



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



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

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

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

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

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

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



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

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

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

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

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

    Имя:*
    E-Mail:
    Комментарий:
    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent