$(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?
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:
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).
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"); 
load(url) should be mentioned here.
Why Don't you Check it yourself?
FiddleDOM 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.
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 Sorry I don't know about the data-ng-init="init()", Which library of JavaScript is it?
Hope it'll Help you. Cheers :)!
data-ng-init="init()" is AngluarJS.
AngularJS?load events you want to know the Functionality?