The DOMContentLoaded event

• Introduction
• An example of using it
• Browser support
• The jQuery ready event
• See also

Introduction

If you add a large image to your page to slow it downloading so that the window.onload event is slowed. This makes the difference in load time of the DOMContentLoaded and window.onload events far clearer.

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 different from the dom1 based window.onload function - 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 a little bit more flexibility.

The function takes three arguments:

1. The name of the event that you're installing - which in this case is DOMContentLoaded (the capitalisation 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 a Line 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'],
            marginInner: 5,
            title: 'A demonstration of the DOMContentLoaded event',
            titleVpos: 0.5,
            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 all modern 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. jquery is aging a bit now - but it's still very capable - so don't just throw it away because it's old!. 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.