Эмёрдж: система управляемой загрузки страниц

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

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

Управляемая загрузка предполагает муторное программирование, поэтому она доступна немногим разработчикам. Есть инструменты, которые несколько упрощают работу, однако останавливает сама необходимость программирования. Я хочу демократизировать управляемую загрузку и снять необходимость в программировании.

Эмёрдж (Emerge) — система управляемой загрузки страниц, мой новый продукт. В системе используется декларативный подход, то есть для каждого элемента прописывается желаемое поведение, а система сама обеспечивает его реализацию. Вот примеры того, что можно сказать элементу с использованием Эмёрджа:

• class="emerge" — появись только после того, как все твои внутренности будут загружены;
• data-effect="slide" data-up="100px" — появись, пролетев снизу вверх 100 пк;
• data-spin-parent="true" — показывай ромашку в родительском элементе, пока не загрузишься.

По умолчанию любой элемент с классом emerge появляется после загрузки всех содержащихся в нём изображений с полусекундным фейдом (изображения, прописанные через ЦСС, тоже учитываются). Эффекты позволяют модифицировать это поведение. Кроме встроенных эффектов, можно создать любой с помощью параметров data-style-1 и data-style-2. Стиль элемента переключится из первого во второе состояние, как только элемент будет готов — программирования снова не потребуется (используются ЦСС-анимации).

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

В первой публичной версии будет как минимум:

• несколько встроенных эффектов появления;
• создание эффектов вручную с помощью ЦСС-анимаций;
• появление с заданной временной задержкой после готовности;
• зависимость (ожидание готовности другого элемента);
• ромашка в родительском элементе, пока грузится данный;
• поддержка Вебкита (в неподдерживаемых браузерах, как и с выключенным Джаваскриптом, страницы открываются обычно).

Эмёрдж будет платным продуктом и выйдет в ноябре.