Emerge is a page load coordinator.

Normally, when a web page loads, elements appear in random order, causing unpleasant flashing. With Emerge, you have fine control over this:

Without Emerge

With Emerge (click demo to replay)

With Emerge, you don’t write Javascript. Instead, you specify the desired behavior declaratively. This includes order, timing, loading indicators and particular animations.

Download zip
check it out on Github

Version 2.0 is rewritten in pure Javascript without JQuery.

Setup and basic usage

Add the following to the <head> of your page:

<script src="/path/to/emerge.js"></script>

Now any element with class="emerge" will fade in after its contents are loaded:

<div class="emerge">
  ... Show this only when it is ready ...

Emerge takes care of all <img /> tags and images used in CSS (backgrounds, list-style-images and so on), as well as videos inserted with the <video /> tag.

See the documentation for detail.

Ilya Birman
Designer and developer