Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

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

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

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

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

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

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

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

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

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

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

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

Подписаться на блог
Поделиться
Отправить
Запинить

Пользовательский интерфейс
Доступен первый раздел
электронного учебника

Популярное