Топ-10: Лучшие плагины для изображений для jQuery и JavaScript Lazy Loader

Пару лет назад неправильное манипулирование структурой HTML могло повлиять на SEO вашей страницы, поэтому было необходимо соблюдать обычные правила загрузки изображений, даже если они были огромными. В настоящее время ленивая загрузка является обязательной для каждого веб-сайта с большим количеством графического содержимого, только если вы хотите, чтобы ваши посетители с улыбкой на лице. Но что делать, если ваш сайт нуждается в хорошем SEO и в то же время оптимальной производительности для ваших посетителей? Так как поисковые роботы начали отображать JavaScript, теперь он может видеть и индексировать ваши лениво загруженные изображения. Это означает только одно, вам нужно беспокоиться только о производительности вашей веб-страницы.

Если ваш веб-сайт отображает много изображений, помимо оптимизации их в фоновом режиме с помощью инструментов, позволяющих уменьшить размер, например, без потери качества, ленивая загрузка является очень приятной и необходимой техникой для таких веб-сайтов. В основном, изображения загружаются только тогда, когда изображение, которое будет показано, входит в область просмотра пользователя. В этом топе мы собрали 10 самых известных и полезных плагинов Lazy Loading для jQuery или VanillaJS, которые вы можете начать использовать в любом из ваших проектов, наслаждайтесь ими!

10. jQuery.LazyLoader

Github

Этот плагин позволяет конвертировать ссылки, указывающие на изображение src или с data-img приписать изображения с этим источником.

9. Ленивая нагрузка от VVO

Github

Этот плагин позволяет лениво загружать изображения, фреймы, виджеты с помощью отдельного lazyloader JavaScript.

8. Просто ленивый

Github

Just Lazy — это легкий плагин javascript для отложенной загрузки реагирующих изображений. Большинство из существующих плагинов javascript, использующих обширные зависимости или поддерживающих только img-тег без отзывчивых частей, этот плагин означает, что это очень рекомендуемая альтернатива:

  • 100% производительность с простым javascript (без jQuery)
  • 100% действительный HTML (без пустого тега src)
  • Простота и легкость (просто ленивая загрузка изображений, никаких особых случаев)
  • Тщательно протестировано на различных устройствах, браузерах и версиях ОС

7. JQuery Ленивый

Github

jQuery Lazy — это легкий, быстрый, многофункциональный, мощный и легко настраиваемый плагин для отложенной загрузки изображений, изображений и фона для jQuery Zepto. Он предназначен для ускорения загрузки страниц и снижения трафика для ваших пользователей, только загружая контент в поле зрения. Вы можете использовать Ленивый во всех вертикальных и горизонтальных способах прокрутки. Он поддерживает изображения в теги и фоны, поставляемые с CSS background-image, по умолчанию. На этих элементах Lazy может установить изображение по умолчанию или заполнитель при загрузке и поддерживает дисплеи Retina. Но Lazy даже может загружать любой другой контент, который вы хотите, плагины а также пользовательские погрузчики.

6. Отзывчиво Ленивый

Github

Отзывчивый ленивый — одна из лучших реализаций в JavaScript для Lazy Загрузка:

  • не делает никаких ненужных запросов
  • работает на современных браузерах, которые поддерживают srcset. По состоянию на февраль 2017 года это 85,27%.
  • управляет измененным размером загруженного изображения (когда телефон поворачивается из портретного в альбомный). Это хороший бонус.
  • не ломает страницу при использовании старого браузера
  • отлично работает в таких инструментах, как Pocket
  • отлично работает в обмене контентом в социальных сетях, таких как Facebook и Pinterest
  • опоры WebP

5. Ленивая нагрузка

Github

LazyLoad — это быстрый, легкий и гибкий сценарий, позволяющий повысить производительность вашего веб-сайта путем загрузки изображений только по мере того, как они входят (или собираются войти) в область просмотра или область с возможностью прокрутки, с лучшей поддержкой атрибута img srcset и прогрессивного Формат изображения JPEG. Это ускоряет ваше веб-приложение загрузка изображений только при входе в окно просмотра. LazyLoad написан на простом (ванильном) Javascript с изображением API наблюдателя пересечения, это поддерживает адаптивные изображения, это SEO дружественный и у него есть некоторые другие заметные особенности.

4. Lozad.js

Github

Lozad — это высокопроизводительный, легкий ~ 0,7 КБ и настраиваемый ленивый загрузчик в чистом JS без каких-либо зависимостей для изображений, фреймов и т. Д. С использованием API IntersectionObserver. Этот плагин:

  • ленивый загружает элементы эффективно, используя чистый JavaScript,
  • это легкая библиотека, всего 731 минимизирована сжат GZIP,
  • не имеет никаких зависимостей 🙂
  • позволяет ленивую загрузку динамически добавляемых элементов,
  • поддерживает адаптивные изображения и фоновые изображения

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

3. открывать

Github

Unveil.js увеличивает время загрузки вашей веб-страницы, задерживая загрузку изображений на длинных веб-страницах, поскольку изображения вне области просмотра (видимая часть веб-страницы) не будут загружаться, пока пользователь не прокрутит их. У Lazy Load есть несколько классных опций, таких как пользовательские эффекты, контейнер, события или атрибут данных. Если вы не собираетесь использовать какой-либо из них, вы можете уменьшить размер файла, оставив только необходимый код для отображения изображений. По умолчанию изображения загружаются и «открываются» только тогда, когда пользователь прокручивает их, и они становятся видимыми на экране.

2. JQuery LazyLoad

Github

jQuery LazyLoad предотвращает загрузку изображений вне области просмотра, пока пользователь не прокрутит их. Это современная ванильная JavaScript-версия оригинального плагина Lazy Load. Он использует Intersection Observer API для наблюдения, когда изображение попадает в окно просмотра браузера. Оригинальный код был вдохновлен утилитой YUI ImageLoader Мэтта Млинака. Новая версия сильно заимствована из сообщения в блоге Дина Хьюма.

1. LazySizes

Github

LazySizes — это один из самых известных плагинов для отложенной загрузки изображений (адаптивных и обычных), iframes и более, он имеет высокую производительность, оптимизирован для SEO и обнаруживает любые изменения видимости, вызванные взаимодействием пользователя, CSS или JavaScript без настройки. Это может стать также вашим инструментом номер один для интеграции адаптивных изображений. Он может автоматически вычислять атрибут размеров для ваших отзывчивых изображений, он позволяет вам делиться медиа-запросами для ваших медиа-атрибутов с вашим CSS, помогая отделить макет (CSS) от контента / структуры (HTML), и это делает интеграцию адаптивных изображений в любую среду действительно просто. Он также включает в себя набор дополнительных плагинов для дальнейшего расширения его функциональности.

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

Ссылка на основную публикацию
Adblock
detector