Best practice using window.onload

Question

I develop Joomla websites / components / modules and plugins, and so often I need the ability to use JavaScript, which fires an event when the page loads. Most of the time this is done using the window.onload function.

My question is:

• Is this the best way to trigger JavaScript events when the page loads, or is there a better / newer way?
• If this is the only way to trigger an event when the page loads, what is the best way to make sure multiple events can be executed by different scripts?

Answer 1

window.onload = function(){}; works, but as you can see , you can specify only 1 listener .

I would say that a better / newer way to do this is to use a framework or simply use a simple implementation of the native addEventListener and attachEvent (for IE), which allows you to remove listeners for events as well.

Here's a cross-browser implementation:

 // Cross-browser implementation of element.addEventListener() function listen(evnt, elem, func) { if (elem.addEventListener) // W3C DOM elem.addEventListener(evnt,func,false); else if (elem.attachEvent) { // IE DOM var r = elem.attachEvent("on"+evnt, func); return r; } else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.'); } // Use: listen("event name", elem, func); 

For the case of window.onload, use: listen("load", window, function() { });

---

EDIT . I would like to expand my answer by adding valuable information that others have pointed out.

These are DOMContentLoaded (Mozilla, Opera, and webkit night hours are currently supported) and onreadystatechange events (for IE) that can be applied to the document object to understand when a document is available for management (without waiting for all images / stylesheets to load etc.).

There are many "hacker" implementations to support cross-browsers, so I highly recommend using a framework for this feature.

Answer 2

Modern javascript frameworks have presented the idea of ​​a "document ready" for the event. This is an event that will fire when the document is ready to perform DOM manipulations. The onload event is triggered only after EVERYTHING on the page has loaded.

Along with the "document ready" event, the frameworks provided the ability to queue several bits of Javascript code and functions to run when the event occurs.

So, if you do not agree with the frameworks, the best way to do this is to implement your own document.onload queue.

If you do not mind the frameworks, then you will want to study jQuery and document.ready , Prototype and dom: loaded , Dojo and addOnLoad or Google for [your framework] and "document is ready",

If you haven't chosen a framework but are interested, jQuery is a good place to start. It does not change any Javascript functionality, and, as a rule, will remain in your way and allow you to do what you like whenever you want.

Answer 3

Window.onload events are redefined in several creations. To add functions, use window.addEventListener (W3C standard) or window.attachEvent (for IE). Use the following code that worked.

 if (window.addEventListener) // W3C standard { window.addEventListener('load', myFunction, false); // NB **not** 'onload' } else if (window.attachEvent) // Microsoft { window.attachEvent('onload', myFunction); } 

Answer 4

Joomla ships with MooTools, so it will be easier for you to use the MooTools library for your additional code. MooTools comes with a custom event called domready that fires when the page loads and parses the document tree.

 window.addEvent( domready, function() { code to execute on load here } ); 

More information about MooTools can be found here . Joomla 1.5 currently ships with MT1.1, while Joomla 1.6 alpha will include MT1.2

Answer 5

Personally, I prefer this method . It not only allows you to have several onload functions, but if some script defined it before , you succeeded, this method is good enough to handle it ... The only problem left is if the page loads several scripts that don't use the function window.addLoad() ; but this is their problem :).

PS This is also great if you want to "increase" functions later.

Answer 6

This is a dirty but shorter way: P

 function load(){ *code* } window[ addEventListener ? 'addEventListener' : 'attachEvent' ] ( addEventListener ? 'load' : 'onload', function(){} ) 

Answer 7

As of always, I include JSuery / bootstrap JS files at the bottom of the document and do not have $ access to the document, I developed a tiny “init” plugin, which is the one and only JS script that I include at the top of my pages:

 window.init = new function() { var list = []; this.push = function(callback) { if (typeof window.jQuery !== "undefined") { callback(); } else { list.push(callback); } }; this.run = function() { if (typeof window.jQuery !== "undefined") { for(var i in list) { try { list[i](); } catch (ex) { console.error(ex); } } list = []; } }; if (window.addEventListener) { window.addEventListener("load", this.run, false); } else if (window.attachEvent) { window.attachEvent("onload", this.run); } else { if (window.onload && window.onload !== this.run) { this.push(window.onload); } window.onload = this.run; } }; 

Using this, I can identify any anonymous loader above the page before turning on jQuery and bootstrap, and don't forget that it will fire when jQuery is present:

 init.push(function() { $('[name="date"]').datepicker({ endDate: '0d', format: 'yyyy-mm-dd', autoclose: true }).on('hide', function() { // $.ajax }); $('[name="keyword_id"]').select2(); });