What's The Difference Between Onload Action And An Action In A Bottom Script

Is there any functional difference between using body onload:

Solution 1:

Yes, there is. Putting your code at the bottom is like putting it in a domready event, not onload.

Domready means that the html code was read (so the dom is ready, or in other words, you can now find dom elements with js selectors), while onload means that all the assets (img, css, etc..) are loaded as well (so, a much longer event).

Edit:

please also refer to MDN docs:

(this is basically like jquery's domready, and it's a document object's event): https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

this is the onload event, and it's a window object's event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Solution 2:

onload documentation from Mozilla:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

Placing scripts at the base of the page will run as soon as the browser has rendered the HTML.

For perception purposes I would combine the two and place your scripts at the bottom of the page in an onload callback, if needed.

Share