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.
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
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 more flexibility.
The function takes three arguments:
-
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) -
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>
-
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:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9+
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 thesetTimeout()
function
as an alternative.