0

$(document).ready(), $(window).load(function(), <body onload="load()">, data-ng-init="init()", $(function(){...});

There are probably about ten other "load" functions between jQuery, Angular, and old-fashioned JavaScript; I cannot find a definitive resource which states in which order these various methods actually fire (across diverse browsers might be another consideration). How many more are there? What are they called? In what order do they do their magic?

1252748
  • 14,597
  • 32
  • 109
  • 229
  • 1
    The duplicate covers most of them, but there's also http://stackoverflow.com/questions/4395780/difference-between-onload-and-ready and http://stackoverflow.com/questions/18441775/difference-between-onload-and-ng-init-in-angular – Anonymous Jun 01 '14 at 16:50
  • @Anonymous because these are separate questions, it isn't what I'm looking for. I'd like it all spelled out in one place. jQuery, Angular and vanilla JS. – 1252748 Jun 01 '14 at 16:52
  • True, it is not all one resource, but you can get a pretty good idea of what each one does and the relative time that they finish from looking at them. – Anonymous Jun 01 '14 at 16:53
  • @Anonymous A "pretty good idea" is not what I want. Please don't close. – 1252748 Jun 01 '14 at 16:57
  • Still, typing any combination of two functions that you mentioned into a search engine will show a specific Stack Overflow question about the difference between those two. Then, when looked at in its entirety, the order becomes evident. – Anonymous Jun 01 '14 at 17:02
  • There are only two events you usually listen to: DOM is completely loaded and manipulable, and all static resources (such as images) are loaded. DOM ready fires before resources ready. There might be other events that the frameworks itself are triggering when they reach a certain state, but those don't have anything to do with the browser. And if that's whats your question is about, you should probably ask specifically for that framework. – Felix Kling Jun 01 '14 at 17:05
  • @FelixKling No, the question of the browser was an afterthought. I really don't care about anything but modern browsers, but thought that I'd include it parenthetically in the questions in case there was anything browser-related connected to this issue that is particularly repugnant. – 1252748 Jun 01 '14 at 17:18
  • With "browser" I meant events triggered by the browser to notify scripts about the page loading state. Poor word choice on my end. – Felix Kling Jun 01 '14 at 17:20

2 Answers2

2

Why Don't you Check it yourself?

Fiddle
As you can see as soon as your DOM becomes ready $(document).ready() is fired and so $(function(){...});. As $(function(){...}); is another way of representing $(document).ready(), It'll not wait for all images and iframes to load.

Also $(window).load(function(), <body OnLoad='function()'> & window.onload = function(){} are same and these event fires when all the content on your page fully loaded including the DOMcontent frames and images. So its kinda slower.

You can Use inline OnLoad for many other elements like img, link, scripts etc.

Like:

<img src="myImage.gif" onload="OnLoadImage()" />
<link rel="stylesheet" type="text/css" href="foo.css" onload="StyleSheetLoaded();" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js" Onload="ScriptLoaded();"></script>

onload is supported by the following HTML tags: 
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

And the following Javascript objects:

image, layer, window

Also JavaScript is Browser Dependant and not library Dependant So it'll be constant for all browsers.

Sorry I don't know about the data-ng-init="init()", Which library of JavaScript is it?

Hope it'll Help you. Cheers :)!

Vedant Terkar
  • 4,553
  • 8
  • 36
  • 62
2

I can answer for jQuery. If you're talking about the document loading, there are two main points in time that you can get notified:

  1. When the DOM has been parsed and is now safe for manipulation (but some resources in the page may not have yet finished loading like images).

  2. When all resources specifically declared in the HTML file have been loaded (like images, but not iframes). There are multiple ways of registering a notification for each of these two events.

For event #2, these two events are triggered at the same time when all resources statically declared in the HTML file (scripts, style sheets, images, etc...) have finished loading (not including iframe content).

$(window).load(function()
<body onload="load()">

These next two are also the same but just different ways of declaring the same event and in modern browsers these are triggered by the DOMContentLoaded event which occurs before the above event and is described by MDN as below:

$(document).ready()
$(function(){...});

DOMContentLoaded is described by MDN:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

FYI, in older browsers that do not generate the DOMContentLoaded event, these functions will be called on a onreadystatechange notification when document.readyState === "complete" and in a really old browser, it might not be triggered until window.onload occurs.

If you look into the browser internals, the browser keeps a document.readyState variable. It has possible values of "loading", "interactive" and "complete".

"loading" was meant to mean that it is in the process of loading the page.

"interactive" was meant to mean that the HTML has been parsed, but some sub-resources (other than images) are still loading (perhaps style sheets or scripts)

"complete" means that the document has finished loading (except for images and iframes)

So, it would have been possible to expose these other load events in jQuery. But (and this is the big but), the ONLY state that works consistently across all browsers is the "complete" state. "interactive" was probably meant to be the point at which you had a completely parsed DOM and you could start changing the DOM even if things like stylesheets weren't yet loaded, but it turned out to be too bug-ridden in IE for it to be worth even trying to use it as the history of jQuery development shows.

jQuery also has another flavor of .load() which uses ajax to load new content into a given DOM object which has nothing to do with the initial page loading:

$("#content").load("some url", completionFn);

This is called by you and immediately fires an ajax function to retrieve whatever content the URL you give it returns. That content will then be inserted into the DOM element in the jQuery object and when that operation is completed, the completionFn will be called.

And, .load() can also be used to monitor when a specific resource is loaded. This is primarily used with images:

var img = $("<img>");
img.load(function() {
    // called when the image finishes loading
});
img.attr("src", "http://example.com/myimage.jpg");
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • I feel that this is not all of the load functions which exist between javascript and the two libraries. – 1252748 Jun 01 '14 at 17:04
  • 2
    @thomas: You may not feel like it, but that doesn't mean that's not the case ;) If you have a concrete question about a concrete method, we can help you with that. But we can't really do much about a "feeling". – Felix Kling Jun 01 '14 at 17:06
  • I don't think that `load(url)` should be mentioned here. – Bergi Jun 01 '14 at 17:09
  • @FelixKling This answer was expanded considerably between the time of my comment and yours. That said, now that I have your attention, is this a definitive list of (excluding angular) load functions in your opinion? – 1252748 Jun 01 '14 at 17:11
  • @Bergi - the OP is clearly searching for more load events (without being very clear about what exactly they are looking for) so I added it. – jfriend00 Jun 01 '14 at 17:11
  • Yes, I shouldn't have included that. But thank you for taking the time to explain it too. :) – 1252748 Jun 01 '14 at 17:14
  • @jfriend00: Then what about `$.ajax().done` or `$(new Image).load()`? They're load events as well… – Bergi Jun 01 '14 at 17:16
  • @Bergi - I've already added the image `.load()`. I wasn't going to go into all the different jQuery functions that can load stuff using Ajax (there are many) except the one called `.load()`. – jfriend00 Jun 01 '14 at 17:18
  • Didn't intend to throw ajax into the mix. Just was inquiring about initial page load. – 1252748 Jun 01 '14 at 17:21