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












Продвинутые разработчики управляют загрузкой с помощью скриптов. Эмёрдж упрощает задачу, снимая необходимость в программировании. В системе используется декларативный подход, то есть для каждого элемента прописывается желаемое поведение, а система сама обеспечивает его реализацию. Вы управляете порядком, временем, индикацией загрузки и конкретными анимациями.
Версия 2.0 переписана на чистом джаваскрипте без Джейквери.
Установка и простое использование
Добавьте в элемент <head>
на странице:
<script src="/путь/к/emerge.js"></script>
Теперь элементы, у которых class="emerge"
, будут проявляться только после загрузки их содержимого:
<div class="emerge">
... Покажется после загрузки ...
</div>
Эмёрдж ждёт загрузки картинок в тегах <img />
и подключенных через ЦСС (фоны, маркеры списка и т. д.), а также видеороликов в теге <video />
.
Подробности — в документации.
Илья Бирман
Автор и разработчик
