Latest Download

Other Available Package

Build your custom Savvy.UI

Custom Builder

Feel lost?

Check out these instructions.

Events Using SUI.onDOMReady

SUI.onDOMReady namespace is an alternative to window.onload function which instead of waiting for all elements embedded in the page to be loaded. All function declare using SUI.onDOMReady is executed when the all the DOM is ready, this make the code execution faster as it doesn’t have to wait for external elements such as images, flash and video to be available first.

  1. Loading the DOM
  2. Load one big Image

You can also view the code from event-using-ondomready.js.

var node = SUI.Query.id("ready");
SUI.onDOMReady.Initialize(node, function() {
    var li = SUI.Query.create("li");
    SUI.DOM.Add(this, li);
    SUI.DOM.AddText(li, "DOM is ready, by .ready()!");
});
var wfn = window.onload;
window.onload = function() {
    var node = SUI.Query.id("ready");
    var li = SUI.Query.create("li");
    SUI.DOM.Add(node, li);
    SUI.DOM.AddText(li, "Page is ready, by window.onload()!");
};

<ol id="ready">
    	<li>Loading the DOM</li>
    	<li>Load one big Image<br /><img src="http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?" style="width:300px; height:175px" alt="" /></li>
</ol>

This example requires the following namespace:

  • SUI.Query
  • SUI.DOM
  • SUI.onDOMReady