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

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

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

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

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

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

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

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

Демо

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

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