Матвей Земсков

Заметки веб-мастера

Суббота, 16 мая 2020 22:57

Ленивая (lazy load) загрузка изображений с Progressively

Оцените материал
(6 голосов)

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

Скрипт Progressively является отличным инструментом для увеличения скорости страницы. Он является скриптом для отложенной загрузки изображений (lazy load), который загружает изображения постепенно в процессе прокручивания страницы пользователем.

Это бесплатный проект с открытым исходным кодом, поэтому вы можете скачать его и использовать на любом веб-сайте. Кроме того, он работает на 100% vanilla JS, поэтому у него нет зависимостей, которые могут утяжелить ваш сайт.

Progressively инструмент для ускорения загрузки сайта

Вы можете посмотреть примеры его использования на домашней странице Progressively.

Он немного отличается от других скриптов отложенной загрузки (lazy load), поскольку сохраняет фиксированные размеры изображений для всей страницы. Это предотвращает очень раздражающий скачок страницы, который вы видите, когда изображения быстро загружаются в область просмотра и увеличивают высоту содержимого. Изображения-placeholder’ы на самом деле выглядят как изображения, которые вы загружаете. Потрясающе!

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

Progressively имеет довольно обширный API, так что это отличный выбор для веб-разработчиков. Его внедрение на сайт не покажется вам сложным, если вы обладаете базовыми знаниями в разработке frontend.

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

Progressively - скрипт для lazy load изображений

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

Загляните на страницу инструмента на GitHub, чтобы узнать больше и загрузить Progressively.

Демо

Оригинал статьи: Lazy-load Images Progressively with “Progressively”

Перевод: Земсков Матвей

Прочитано 7823 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх