Постепенно позволяет загружать изображения с помощью Vanilla JS

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

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

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

Вы можете посмотреть живую демонстрацию на домашней странице Progressively.

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

И заполнители изображений на самом деле выглядят как загружаемые изображения. Потрясающие!

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

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

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

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

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