difference between pageLoad , onload & $(document).ready() - javascript

i need to know in more detail of what is the differences between pageLoad , onload & $(document).ready()
I found answer but that is not ver clear to me.
the answer is like
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn't have to wait for all content to load.
the person trying to say ready event occurs after the HTML document has been loaded
and onload event occur after all page element like image etc being loaded.
So what is HTML document load? I know HTML document load means all page element load complete.
What does mean like dom is ready or loaded? What is the difference between HTML document load & dom load?
Please make me understand with example.
Thanks

I don't know what you mean by pageLoad, but here's some info on onload and $(document).ready().
window.onload fires when everything in the page has finished loading. That means that not only the entire DOM is loaded, but any linked resources such as images are fully loaded. Because this waits for images to finish loading, it can sometimes take a long time to fire window.onload. Unless you really need to wait until images are finished loading, you do not generally want to wait this long to start running your javascript that modifies the page or hooks up event handlers, etc...
$(document).ready() is a jQuery-specific event that fires as soon as the DOM is ready for manipulation, but potentially long before images have finished loading. This occurs after all objects present in the page HTML have been parsed and initialized by the browser and after all scripts in the page have been loaded. At the moment of this event, it is safe to modify the DOM in all browsers. This even may occur a little earlier or later in some browsers as the mechanism for detecting when the DOM is safely loaded varies between older and newer browsers.
The jQuery 1.6.x implementation for $(document).ready() uses a number of different detection mechanisms for when the DOM is ready. The preferred method is when the DOMContentLoaded event triggers on the document object. But, this event is only supported by some browsers so it has fallback mechanisms for other browsers.
Both of these events will fire only once per page.

Let's draw an analogy to compare the process of loading a web page to a chef with a recipe:
First, the chef (browser) reads the entire recipe (downloads the HTML document), to make sure that he understands the steps (HTML code) and that he knows what ingredients (images), utensils (style sheets), and appliances (external scripts) he will need to have in his kitchen (browser cache).
As the chef continues reading, he sends his assistant to the pantry to get the ingredients, utensils, and appliances (download the other files from the server). When he is finished reading the recipe ($(document).ready()), he starts to follow the steps (display the page), but sometimes he gets to a step before his assistant returns with the necessary materials to complete that step. He's pretty skilled, though, so he's still able to complete the later steps while he waits. (The analogy breaks down just a bit here, but basically: the browser lays out the page as well as it can based on the HTML; when you see a page load and then the fonts or layout change after a couple of seconds because it finally got the style sheet... just imagine that this chef is somehow able to add eggs to a cake that's already in the oven.)
It's only after the chef's assistant has brought everything identified in the recipe back to the kitchen (the browser has loaded all of the content) that the chef can put the completed meal onto the plate and garnish it (run the onload event code).
The onload event is a standard event in the DOM, while the ready event is specific to jQuery.
The DOM is the Document Object Model, a basic component of ordinary JavaScript. This means that all modern web browsers already know what onload means.
jQuery is a widely-used JavaScript library. In order for your script to properly use $(document).ready(), you will have to link to a copy of the jQuery library. Browsers don't know what $(document).ready() means without jQuery.

Related

What is the order in which various load functions/methods execute [duplicate]

This question already has answers here:
jQuery - What are differences between $(document).ready and $(window).load?
(8 answers)
Closed 8 years ago.
$(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");
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 :)!

jQuery onLoad x jQuery onDomready

Every time I use jsFiddle I see two options to initialize the contents via jQuery: onLoad or onDomReady.
I Tested with most of the scripts I wrote and there was no functional difference. Searching on Google I saw that one of the main differences is that via onLoad, scripts will only start running after all the elements are loaded and that includes CSS external files, JS external files, images and etc., which can be useful if you need to load JS files in a certain order, but at any given moment one of these files makes reference to another who has not been loaded yet, while via onDomReady once the HTML page content is loaded, scripts begin to be loaded already without necessarily others have been.
Got this difference right? Is there any other differences to be studied and perceived?
Making comment as answer:
One major difference, jquery ready 'pseudo' event will be fired even handler
is set after DOM is effectively 'ready', jquery using internally a
promise. Window onload event won't be fired if handler is set after
window is loaded. e.g: http://jsfiddle.net/c58a6/
It should be then noted that there is no in-build equivalent of jQuery document ready event. For example, DOMContentLoaded in-build event won't be fired if settled after the DOM is ready.

Javascript and jQuery Execution/Sequence

A question/clarification regarding Javascript/jQuery execution and it's sequence.
Please excuse me if I seem to answer my own question here, but I feel I'm missing a key something in this process.
I was told my selectors weren't taking because the DOM wasn't ready which had brought this question. Script was initially in the head using the ready jQuery ready method.
Thanks everyone.
Problem:
No access to Drupal template files.
Can only add in the head.
Appending via jQuery isn't too useful with the script tag.
Our solution currently is linking to the file in the markup.
I'm really seeking clarification though to the process here.
Context:
(Sorry bout that)...
Element wasn't targeted by my selector, from the script in the head. Syntax was correct, as it targeted the HTML tag without issue.
My understanding was the ready method/resulting listener would trigger after the DOM was fully constructed.
What I believe I already know:
I know scripts should ideally be placed just above the closing body tag in the markup.
I know that when the tokenizer encounters a script tag, it stops everything and executes the script (unless defer/async).
I know this is why they should ideally be placed above the closing body tag so the DOM is ready.
I know that the jQuery ready method attaches a listener, when the browser is switched to it's ready state after the DOM has been loaded, it fires.
The Questions:
Given all of this, placement in the head renders the ready method useless as its being executed right away because of the tokenizer?
Is this really just to avoid colliding/overwriting multiple window.onloads? (Should've clarified.)
Given all of this, placement in the head renders the ready method useless as its being executed right away because of the tokenizer?
Wrong. The ready() method gets called only when the DOM has fully loaded, all ready() does is that it establishes a listener that waits for the DOM to load so that statements inside the ready() method get executed when the DOM is ready to be manipulated, in other words it adds a listener to the loaded event that gets called and executed only when the document has full loaded.
Is this really just to avoid colliding/overwriting multiple onloads?
What do you really mean by "colliding/overwriting" ? You can have several listeners listening to the same events in JavaScript, and they won't overwrite or collide with each other.
From your question:
I know that the jQuery ready method waits until the browser is switched to it's ready state after the DOM has been loaded.
Well, sort of. The jQuery ready method doesn't wait. It attaches an event listener. The function is attached, but not executed. The function is only executed when the DOM is ready; the rest of the page continues loading.
You're really in the sphere of micro-optimisation here. Yes, placing script elements at the end of the body is ideal, but it will make minimal difference in reality, unless you have a huge, complex and time-consuming script.

Is placing script tag before </body> tag equivalent to jQuery's document.ready method

If we call a javascript method myMethod() in a script tag which is before closing body, is it equivalent to calling myMethod() inside jQuery's document.ready function ? If not, Why ?
From here:
Under the hood: $(document).ready() As you would expect from John
Resig, jQuery’s method for determining when the DOM is ready uses an
assortment of optimizations. For example, if a browser supports the
DOMContentLoaded event (as many non-IE browsers do), then it will fire
on that event. However, IE can’t safely fire until the document’s
readyState reaches “complete”, which is typically later. If none of
those optimizations are available, window.onload will trigger the
event.
These events are independent of a location within the HTML tag, as other event still are going on even at the time of rendering </body>.
No it's not the same, you place the <script> tags before the closing </body> tag to avoid blocking the rendering of html on older browsers, AFAIK, but you have no guarantee that the DOM is "ready"
Not exactly. $(document).ready(); reacts on the so called DOMContentLoaded event which is fired right after the DOM has been loaded and the browser is aware of all the elements on the page (not the content itself).
The main reason why code is usually put inside these blocks is not that much related to preventing blocking of parallel loading but to ensure that the elements which are to be manipulated during page load are actually loaded and present in the DOM tree. Not much sense in manipulating elements which the browser is not aware of right?
Putting JavaScript content (or any other content for that matter) at the bottom of the page is actually more closely related to the onload event which is fired after the page has finished loading, including the content itself. Either way its almost certain that content inside $(document).ready() blocks will be executed before the one at the bottom of the page however if you load external libraries on which the code inside the ready() block relies you can't put those at the bottom of the page.
In general if you have code that isn't dependent on external libraries and a successful loading of DOM you can safely put it at the bottom of the page. If you however have stuff that needs to be executed right after the DOM has been loaded you most definitely want that code in the $(document).ready() block, but do have in mind that you can place that block wherever you want, even in the middle of the page (which can be a nice trick sometimes).

Popup on complete load of HTML page

Here it is the situation....
I have designed a demo which is made up of HTML in which there are several images and we have made it such a way that it works offline also for ipad using manifest file.
so so once the project/demo is loaded one can use it off line and book mark it so that he can use it any time he wants.
here is the link for reference:
http://iwdfvm2730.wdf.sap.corp:1079/speeddemo/dpr921/
I need help from you guys to show a popup/loader icon when the data or every thing is loaded completely.
thanks,
Kunal
What you gave us looks like an internal corporate address, but unless you dynamically load resources, I'd suggest that you set up an onload handler: <body onload="pageLoaded()">.
You can have a look at the jQuery .load() function. Excerpt from the documentation page on the .ready() function:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
So, in essence, the .ready() function executes after loading the DOM, while the .load() function executes after all page assets (including script, CSS and image references) have loaded.

Categories