I develop Joomla websites/components/modules and plug ins and once in awhile I require a chance to use JavaScript that creates a celebration once the page is loaded. More often than not this is accomplished while using window.onload function.

My real question is:

  1. Is the easiest method to trigger JavaScript occasions around the page loading or it is possible to better/more recent way?
  2. If this sounds like the only method to trigger a celebration around the page loading, what's the easiest method to make certain that multiple occasions could be run by different scripts?

window.onload = function() works, but as you may have observed, it only enables you to definitely specify 1 listener.

I'd the better/more recent method of doing this is to utilize a framework, or simply to utilize a simple implementation from the native addEventListener and attachEvent (for IE) techniques, which enables you to definitely remove the audience for that occasions too.

Here is a mix-browser implementation:

// Mix-browser implementation of element.addEventListener()

function listen(evnt, elem, func) 

    else window.alert('I'm sorry Dork, I'm afraid I can not do this.A)



// Use: listen("event title", elem, func)

For that window.onload situation use: listen("load", window, function() )


EDIT Let me expand my answer with the addition of precious information which was pointed by others.

This is one of the DOMContentLoaded (Mozilla, Opera and webkit nightlies presently support this) and also the onreadystatechange (for IE) occasions which may be put on the document resist understand once the document can be obtained to become altered (without waiting for the images/stylesheets etc.. to become loaded).

You will find lots of "hacky" implementations for mix-browsers support of the, I highly recommend to utilize a framework with this feature.

Modern Ajax frameworks have introduced the thought of a "document ready" event. It is really an event fire once the document is able to have DOM manipulations carried out onto it. The "onload" event fires only next around the page has loaded.

Together with the "document ready" event, the frameworks have given a method to queue up multiple items of Javascript code and processes to operate once the event fires.

So, if you are in opposition to frameworks, the easiest method to build a storage shed would be to implement your personal document.onload queue.

If you are not in opposition to frameworks, then you will want to consider jQuery and document.ready, Prototype and dom:loaded, Dojo and addOnLoad or Google for [your framework] and "document ready",.

Should you haven't selected a framework but they are interested, jQuery is a great starting point. It does not change some of Javascript's core functionality, and can generally avoid the right path and allow you to do things as you desire when you wish to.

Personally, I favor this process. It doesn't only give you multiple onload functions, but when some script had defined it before you have into it, this process is great enough to deal with that... The only issue left is that if a webpage loads several script which doesn't make use of the window.addLoad() function but that's their problem :).

P.S. It is also great if you wish to "chain" more functions afterwards.

Joomla ships with MooTools, so its simplest to make use of the MooTools library for the additional code. MooTools ships having a custom event known as domready that fires once the page is loaded and also the document tree is parsed.

window.addEvent( domready, function()  )

More details about MooTools are available here. Joomla 1.5 presently ships with MT1.1 as the Joomla 1.6 alpha includes MT1.2