jQuery onload x jQuery onDomready

Asked

Viewed 469 times

12

Every time I use the Jsfiddle see options to initialize jQuery content via onLoad or onDomready.

I tested with most of the scripts I write and there was no functional difference. Searching on Google I saw that one of the main differences is that I saw onLoad scripts only start running after all elements are loaded and this includes CSS, JS, images, etc., which can be useful if you need to upload files in a certain order, but at some point one of these files refers to another that has not yet been loaded, while onDomready once loaded the HTML content of the page the scripts start to be loaded already without necessarily the others have been.

  • I understood this difference correctly?
  • Is there any other difference to be studied and perceived?
javascript jquery

2 answers

3

This is the biggest difference between the two events. With DOMContentLoaded, scripts start running as soon as the DOM (page HTML) is ready to be accessed by Javascript.
On the other hand, with window.onload the script expects all content to be loaded (including images, CSS, etc., as denoted in the question).

Perhaps the most relevant difference that was not pointed out is the compatibility. O window.onload is supported by older browsers, while the other event may not be, as far as I know.

  • 1

    Another difference is that with jQuery.onload there can be problems with cached images in IE.

  • 1

    I posted this question in the OS too and a user showed me this fiddle. Basically, you can have several onDomready, while onload only once.

  • @Philippegioseffi It’s an interesting difference. Thanks for sharing!

  • Actually you can have several onload, if you keep reading it shows this, but nothing that is tied to an onload that has already been loaded, kind of confusing business.

2


This thing you’re saying is a little confusing:

if you need to load JS files in a certain order, but at some point one of these files refers to another that has not yet been loaded, while via onDomready once loaded the HTML content of the page the scripts start to be loaded already without necessarily the others have been.

Javascript files are by default loaded and executed in the order they are in the HTML source code, one after the other (never in parallel) - save some exceptions*.

If all your scripts are loaded this way, it doesn’t matter if the code within them postpones the execution of something to the DOMContentLoaded or for the window.onload. The result in both cases will be the same: the delayed code will be executed after all other scripts have been loaded, and its codes executed (except those delayed codes).

The exceptions I mentioned:

  • Scripts in tags <script> that use the attribute async are loaded asynchronously, and executed as soon as loaded (on browsers supporting this attribute).
  • Scripts in tags <script> that use the attribute defer are loaded asynchronously, and run only after the Parsing complete document (in browsers supporting this attribute). This is equivalent to executing code just before the event DOMContentLoaded.
  • Scripts injected via document.createElement() + document.body.appendChild are loaded asynchronously, and executed as soon as loaded.

  • First of all, excuse the delay in responding, it has been a stressful week with the deployment in production of a system. I know that JS files are loaded sequentially, what I meant was that in certain situations you are required to determine that order, for example, libraries that use jQuery need to be loaded after jQuery itself for it to work, that’s what I meant. I’ll study your exceptions because I didn’t know the first and third. The second, because it is older, was up to the solution I used to solve a certain problem [continue]

  • Described in question "How to override your Own jQuery’s validate method?". It is worth reading the chat to see another solution that I also arrived.

  • @Philippegioseffi I don’t know if I understand yet, but if you want to load everything asynchronously and determine the order of dependencies, I recommend require.js.

  • A practical example: any jQuery plugin, if you list it in the list of scripts before jQuery itself will give problem, right? I’ll find that require.js

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.