What is the DOMContentLoaded event?

A description of the DOMContentLoaded event and why it may be preferable to use over the window.onload event. This new event is triggered before the onload event so you don't have to wait for the entire page to load. Thus it can result in significant performance gains.

Waiting for onload event...

This image is here to pad the page and slow down loading so that the window.onload event is slowed. This makes the difference in load time of the DOMContentLoaded and window.onload events far more visible.

[No canvas support]

The DOMContentLoaded event is a useful event that can make a big impact on the performance of your pages, hence this example. It fires when the HTML and scripts that make up the page have loaded, but not necessarily the images or CSS.

This can make a big improvement on the speed of your page(s) because there's less required to load before the event fires. So your charts are created and can be seen by the user quicker.


An example of using it

This is how you use it. It's slightly different to the DOM1 based window.onload method you need to use the DOM2 style of installing the event - ie the addEventListener function. But this method is better because it provides you with more flexibility.

The function takes three arguments:

  1. The name of the event that you're installing - which in this case is DOMContentLoaded (the capilisation matters - so use it exactly as it is here)
  2. The function to run. If this exact same function is installed multiple times then subsequent installations are ignored. And by "exact same" I don't just mean that it should be the same text. If you want subsequent installations to be ignored then use a function that lives globally (or one that isn't thrown away at the end of the current function, whatever that may be). eg Make a GLOBALS object and add the function to it, and then use that function. Like this: 
    <script>
    GLOBALS = {};
    GLOBALS.myFunc = function (e)
    {
        // ...
    }
    
    document.addEventListener('DOMContentLoaded', GLOBALS.myFunc, false);
</script>
  3. This is the mode to run the event in - either capture mode (use true) or bubble mode (use false).

    When events are triggered they start at the document level and progress down the DOM to your element (this is the capture phase). Then they bubble back up the tree (this is the bubble phase) and this is (almost always) the one you want.

    So use false here.

Here's an example of using the event to create an RGraph chart: 

document.addEventListener('DOMContentLoaded', function ()
{
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,3,2,4,5,6,7,4,8,9],
        options: {
            xaxisLabels: ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob'],
            hmargin: 5,
            title: 'A demonstration of the DOMContentLoaded event',
            titleVpos: 0.5,
            tickmarksStyle: 'circle',
            tickmarksSize: 5,
            linewidth: 2.01,
            shadow: false,
            marginBottom: 35,
            textSize: 12,
            yaxis: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false
        }
    }).draw();
}, false);

Browser support

The DOMContentLoaded event is supported by the following browsers:

The jQuery ready() event

The jQuery ready() event can also be used instead of the DOMContentLoaded event. This primarily uses the DOMContentLoaded event and falls back to the window.onload event when it's not available. You would use it like this: 

<script>
    $(document).ready(function ()
    {
        // Create your chart here
    });
</script>

Because of the proliferation of jQuery you may already be using it - in which case it's a simple matter of adding a function call to it that creates your chart.

See also

You might also be interested in asynchronous chart creation with the setTimeout() function as an alternative.