Bookmark and share:
Bookmark with delicious tweet this site Post to Google Buzz! Post to Facebook Share on FriendFeed Stumble! this site

RGraph: HTML5 canvas graph library - DOMContentLoaded example

Waiting for onload event...

These images are here to pad the page and slow down loading so that the window.onload event is slowed. This makes the difference far more visible.

[No canvas support]

The DOMContentLoaded event is an extremely useful event and can make a big impact on the performance of your pages, hence this example. The DOMContentLoaded event fires when the pages HTML and scripts have loaded, but not necessarily any images or CSS. This can make a big improvement on the apparent speed of your page(s).

You can read more about the DOMContentLoaded event on the Mozilla site, here, and the Microsoft site here.


function createGraph(func)
{
    if(window.addEventListener) {
        window.addEventListener('DOMContentLoaded', func, false);
    } else {
        document.attachEvent("onDOMContentLoaded", func);
    }
}

Browser support

The DOMContentLoaded event is supported by the following browsers:

See also

You might also be interested in asynchronous graph creation as an alternative.