Поделитесь девятью библиотеками отложенной загрузки изображений JavaScript

JavaScript Программа перевода самородков

Поделитесь девятью библиотеками отложенной загрузки изображений JavaScript

Почему изображения лениво загружаются?

Производительность имеет решающее значение в веб-приложениях. У вас может быть самый красивый и привлекательный веб-сайт в мире, но если он не загружается в браузере быстро, люди будут склонны его пропускать. Заставить ваш сайт работать очень хорошо может быть сложно. Это связано с тем, что в веб-разработке существует множество узких мест, таких как требовательный к производительности JavaScript, медленный анализ веб-шрифтов, негабаритные изображения и многое другое.

В этой статье мы в основном сосредоточимся на влиянии графических ресурсов на веб-сайт. согласно сJecelynСогласно исследованиям, веб-страница потребляет в среднем 5 МБ трафика только для загрузки изображений. Это может быть тяжелым бременем для пользователей, поскольку в некоторых странах мобильный трафик очень дорог. Пользователи также могут столкнуться с проблемами, когда сайты загружаются слишком долго, особенно при низкой скорости интернета. Все это может оказать негативное влияние на ваш сайт.

согласно сJakob NielsonИсследования, вот некоторые важные статистические данные, которые вы должны иметь в виду:

  • Время загрузки сайта ниже 100 мс считается мгновенным.
  • Ощутима задержка от 100 до 300 мс.
  • 47% пользователей ожидают, что веб-страницы загрузятся за две секунды или меньше.
  • 40% пользователей будут ждать загрузки не более 3 секунд, прежде чем покинуть веб-сайт.

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

Существует несколько стратегий эффективного обслуживания графических ресурсов веб-сайта без ущерба для производительности и качества, и отложенная загрузка — одна из них. Ленивая загрузка означает загрузку только того, что необходимо, и откладывание остального до тех пор, пока оно не понадобится. Эту стратегию можно применять к изображениям, видео, тексту и другим типам данных. Но в большинстве случаев он подходит для контента большого объема, такого как графические ресурсы.

Есть несколько способов ленивой загрузки изображений на веб-сайт. Например, вы можете использоватьIntersection Observer APIили используйте обработчик событий, чтобы определить, находится ли элемент в поле зрения. Существует также несколько мощных библиотек JavaScript, и в соответствии с потребностями и совместимостью можно использовать следующие методы ленивой загрузки библиотек для изображений. Давайте взглянем!

Lazy Sizes

Lazy SizesВ настоящее время это одна из лучших библиотек с ленивой загрузкой, с более чем 14,1 тыс. коллекций на Github, после сжатия только3.4kB. Уровень поддержки библиотеки на стороне браузера достиг 98,5%, и ее документация также проста для понимания.

Функции

  • Содержит поддержку адаптивных изображений.
  • Оптимизируйте SEO, обнаруживая поисковые системы с помощью пользовательских агентов и загружая все изображения сразу.
  • На основе эффективного и практичного кода.
  • Предварительно загружать ресурсы, когда сетевое подключение не используется.
  • Содержит поддержку LQIP.
  • служба поддержкиIntersectionObserver,MutationObserverа такжеgetElementsByClassNameЖдать.
  • Поддерживает использование плагинов для расширения возможностей.
  • Поддерживает автоматический расчет размера адаптивного изображения.

ты сможешьздесьСм. примеры.

Lozad.js

Lozad.jsподдержка изображений,iframe, реклама, видео и другие элементы отложенной загрузки. Он имеет почти 6,4 тысячи звезд на Github и очень популярен в сообществе. По данным исследовательской группы, эта библиотека используется веб-приложениями нескольких брендов, включая Tesla, Domino's, Xiaomi и BBC. Он очень маленький, только сжатый1.1kB. так как он используетIntersectionObserverAPI иMutationObserverAPI, поэтому его поддержка браузерами составляет всего около 92%.

Функции

  • Нет никаких зависимостей.
  • Поддержка ленивой загрузки динамически добавляемых элементов.
  • Полностью с использованием JavaScript.
  • Содержит поддержку LQIP и изображений ответа.
  • чем использоватьgetBoundingClientRect()Библиотека более эффективна.
  • Полифилы можно использовать в неподдерживаемых браузерах.

ты сможешьздесьСм. примеры.

Lazyload от Tuupola

Lazyload by Tuupola— еще одна популярная библиотека отложенной загрузки изображений на Github, набравшая почти 8,4 тыс. звезд. оно используетIntersectionObserverAPI и прост в использовании. только сжатый956 bytes, меньше, чем другие библиотеки. Это может быть связано с тем, что он использует толькоIntersectionObserverAPI, потому что другие библиотеки используют другие комбинации для лучшей совместимости и производительности. Кроме того, благодаря этому в настоящее время его поддержка браузерами составляет 92%.

Функции

  • Для удобства он включает оболочку jQuery.
  • Включает поддержку LQIP и ответных картинок.
  • Ядро можно настроить, передав дополнительные параметрыIntersectionObserverAPI.

Vanilla Lazyload от Андреа Верлички

Vanilla lazy load— еще одна чистая библиотека JavaScript для ленивой загрузки изображений, видео и фреймов. Он очень популярен на Github, доступно почти 1500 репозиториев и пакетов. Он имеет более 1,9 миллиона загрузок в год в NPM. Только после сжатия2.7kB. Подобно другим библиотекам, эта библиотека используетIntersectionObserverAPI, который в настоящее время поддерживается браузерами на уровне 92%.

  • Оптимизирован для SEO, потому что библиотека не накладывает изображения из поисковых систем.
  • Поддерживаются нестабильные сетевые соединения, так как библиотека автоматически перезагружает изображения после разрыва соединения.
  • Если изображение выходит из области просмотра, выгрузите изображение.
  • Содержит поддержку LQIP и изображений ответа.
  • Полностью с использованием JavaScript.

ты сможешьздесьСм. примеры.

Yall.js

Yall.jsэто еще одна библиотека JavaScript, которая также использует толькоIntersectionObserverAPI для ленивой загрузки изображений, видео,iframeи фоновые изображения CSS. Эта библиотека имеет около 1,1 тысячи звезд и используется 91 пользователем в своей библиотеке проектов. Эта библиотека может быть сжата до1kB. Как мы видели в предыдущей библиотеке, с момента использованияIntersectionObserverAPI, Yall.js поддерживается браузерами на 92%. Следует отметить, что если браузер не поддерживаетIntersectionObserverAPI, резервной копии не будет. В этом случае вы должны использоватьpolyfill.

Функции

  • с помощьюMutationObserverAPI поддерживает обнаружение динамически загружаемых элементов.
  • с помощьюrequestIdleCallbackМетоды оптимизации времени простоя браузера.
  • поддержка сквознойsrcСвойства напрямую реализуют LQIP.
  • Поддержка ленивой загрузки фоновых изображений CSS.

Layzr.js

Layzr.jsЭто легкая библиотека отложенной загрузки изображений, основанная на JavaScript. он в основном используетElement.classList, несколько методов массива ES5 иrequestAnimationFrameметод. Благодаря этим API библиотеку поддерживают более 97% пользователей браузеров. У Layzr.js более 5,6 тыс. коллекций на Github, он очень популярен и сжат до1kB.

  • Не зависит ни от какой другой библиотеки.
  • Разумно выбирайте источники изображений на основе совместимости и доступности браузера.
  • Поддерживаются динамически добавляемые элементы.
  • Четкая и краткая документация и примеры.
  • имеютпорогОкно просмотра свойства регулирует отложенную загрузку изображения, и изображение может быть загружено раньше или позже по мере необходимости.

ты сможешьздесьСм. примеры.

Blazy.js

Blazy.js— еще одна легкая библиотека JavaScript с отложенной загрузкой, способная обрабатывать изображения, видео иiframe. Он очень популярен на Github, имеет 2,6 тысячи звезд и в настоящее время используется более чем в 860 репозиториях проектов с открытым исходным кодом. Он сжат только1.9kB.

использоватьElement.getBoundingClientRect()метод и реализацияIntersectionObserverПо сравнению с другими библиотеками API этот метод может не выполняться. Но благодаря такому подходу эту библиотеку поддерживают более 98% пользователей браузеров. Он также используетElement.closest(). Поддержка браузерами этого API составляет чуть более 94%. В этом случае вам не нужно беспокоиться о недостающих 6%, потому что библиотека включает в себяpolyfill.

Функции

  • Для реальных веб-сайтов с миллионами посещений в месяц.
  • Нет никаких зависимостей.
  • Поддерживаются адаптивные изображения.
  • Что-то вроде Layzr.js позволяет загружать элементы со смещениями.
  • Ясность с примером кодаДокументация.
  • Поддерживаются форматы модулей, такие как AMD, CommonJS и глобальные.
  • Очень легко обеспечить изображения сетчатки глаза.

ты сможешьздесьСм. примеры.

Responsively Lazy

Responsively lazyТакже библиотека ленивой загрузки для изображений. Его содержимое лаконичное, всего 1,1 КБ после сжатия. Он выделяется среди многих библиотек хорошей реализацией синтаксиса. Большинство библиотек, которые мы обсуждали выше, требуют, чтобы вы использовали браузеры с отключенным javascript.noscriptотметить, игнорироватьsrcсвойства и т. д. Но ленивый может использовать традиционныеsrcсвойство и добавьте для поддерживаемых браузеровsrcsetа такжеdata-srcАтрибуты. Это делает эту библиотеку удобной для поисковой оптимизации (SEO). Эта библиотека также используетElement.getBoundingClientRect()Поэтому в этой библиотеке также будет присутствовать принудительная перекомпоновка макета.

Кроме того, эта библиотека имеет почти 1,1 тысячи звезд на Github и поддерживается почти 95% пользователей браузеров.

Функции

  • Поддерживаются адаптивные изображения.
  • Поддержка изображений в формате webp.
  • Поисковая оптимизация (SEO) дружественная.
  • Доступно не так много настроек.

ты сможешьздесьСм. примеры.

LazyestLoad.js

LazyestLoad.js— одна из самых маленьких библиотек в этом списке. Это всего 700 байт, а сжато 639 байт. Есть две версии этой библиотеки,lazyloadа такжеlazyestload. У них разное применение,lazyloadВерсия работает как обычная библиотека, изображение будет загружено, когда оно собирается войти в окно просмотра; однакоlazyestloadВерсия будет загружать изображение только тогда, когда пользователь перестанет прокручивать и изображение находится в области просмотра или в пределах 100 пикселей. Это помогает снизить нагрузку на сеть, если пользователь просто прокручивает, не останавливаясь, чтобы увидеть изображение.

он в основном используетElement.getBoundingClientRect()метод, неэффективный по сравнению с другими реализациями, и известныйвызвать перекомпоновку макета.

Эта библиотека обрабатывает только изображения, в отличие от других библиотек, которые могут обрабатывать видео иiframeбиблиотека. Он также имеет более 1,5 тысячи звезд на Github.

Функции

  • Просто и понятно.
  • Не допускает обширной настройки, как другие библиотеки.
  • Поддерживаются адаптивные изображения.
  • Документация недостаточно подробная.

вы можете просмотретьпример ленивой загрузкии посмотретьпример ленивой загрузки.

Поскольку большинство современных браузеров поддерживают ленивую загрузку, рекомендуется использовать нативную реализацию. Встроенная отложенная загрузка также обеспечивает отложенную загрузку изображений, даже если в браузере отключен JavaScript. только что вimgиспользуется в разметкеloading="lazy"свойства, вы можете сэкономить все неприятности.

Большинство современных браузеров изначально поддерживают ленивую загрузку, и вскоре они будут поддерживать Safari. В настоящее время скорость поддержки браузера составляет74%, который можно использовать, если браузер не поддерживает нативную реализациюpolyfillИли одну из вышеперечисленных лениво загружаемых библиотек.

На всякий случай вам может понадобиться реализовать одну из библиотек с помощью динамического импорта.

Знайте свою целевую аудиторию

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

Например, если вы реализуетеIntersectionObserverБиблиотека API, вы получаете высокопроизводительную библиотеку, но она будет иметь меньший охват пользователей. Если требуется исправление, должен быть запасной вариант, например.polyfills, что увеличит общий размер библиотеки.

В другом примере, если библиотека с ленивой загрузкой используетgetBoundingClientRect()метод, он не будет работать так же хорошо, какIntersectionObserverAPI, как известно, существуетПринудительное переформатирование макетавопрос. Хотя производительность приносится в жертву, охват пользователей будет выше, чем у первого. Хотел бы я прояснить это.

Как свести к минимуму проблемы совместимости и максимизировать производительность?

Эти аспекты можно улучшить, если понять вашу целевую аудиторию и использование ими браузера. Если вы знаете свою целевую аудиторию и браузеры, которые они используют, вы можете убедиться, что ваша реализация отложенной загрузки лучше подходит для этих версий браузера. Это уменьшит включение неподдерживаемых браузеров.polyfillПотребности, потому что это уже известно, какие браузеры фокусируются на. Когда у вас есть выброс (неподдерживаемый браузер), изображение может быть загружено напрямую без какого-либо отставания или задержки. Если у вас хорошее понимание вашей аудитории, количество этих выбросов будет незначительным.

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

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

Спасибо за чтение и удачного кодирования! !

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы для пересмотра перевода и PR. Начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории