Emerge.js, a framework for coordinated page loading

When a web page is loading, images appear in random order, causing unpleasant flashing. Good web developers have learned to deal with the issue by coordinating things with Javascript.

An example would be Apple’s Mac page, where an animated spinner is displayed on top for a couple of seconds, and when the menu items are ready, they appear with a nice animation.

Since coordinating the load process requires tedious programming, it is not what many people choose to do. There are tools which simplify the task to some extent, however the very necessity of programming is a dead end for most people.

Emerge.js changes this.

Emerge.js is a framework for coordinated page loading. It simplifies the task by removing the need to write any Javascript code. The framework uses a declarative approach, where you specify a desired behavior for each element and do not think about the implementation. To make an HTML element wait for its content to load before emerging, use:

class="emerge"

Elements of class emerge fade in after all the contained images are loaded (this includes CSS images). To display an animated spinner while loading, use:

data-spin="true"

The framework lets you coordinate the order and timing and use different animation effects as you see fit, for instance:

data-effect="slide"
data-await="other-element-id"

Check out the product page for detailed description.