1. The difference between $(window).load(), window.onload=function(){} and $(document).ready() methods
1、$(window).load() 和window.onload=function(){}
It can only be executed after all elements in the page (including pictures, flash) are loaded;
$(document).ready() is executed after the DOM element in the page is loaded.
2、$(window).load()和window.onload=function(){}
The difference is that the former can load multiple functions at the same time like $(document).ready().
Second, the difference between window and document
1. window represents the browser window, that is, the visual browser window
document represents the dom element of the entire page
That is, document is just a property of window;
2. The difference between the two can be displayed intuitively when the page has a scroll bar. When a scroll bar appears, $(window).height and $(document).height are not equal, and $(document).height is higher than $ (window).height is large, because the height of the window is always the height of the visible browser window, and the height of the document is the height of the dom element of the entire page, that is, it exceeds one screen.
Image borrowing address http://www.jb51.net/article/59154.htm
3. Usage scenarios of the $(window).load() method
1. When a trigger event requires all elements of the page to be loaded before execution, and the elements are not filled by ajax callback, use $(window).load().
2. When a trigger event requires all elements of the page to be loaded before execution, and the elements are filled through ajax callback, the use of $(window).load() will sometimes be valid and sometimes invalid.
Because the loading of the callback's html element may complete after $(window).load() is executed.
The load event is mainly used to replace the native window.onload, which can only be used in two scenarios:
· On the window object. For example $(window).load(fn);.
· Elements with URLs (images, scripts, frames, iframes). For example $("img").load(fn);.
In addition, there is no load event for any element, such as: $(document).load(fn); This is a wrong way of writing, and it will not be executed at all.
The load event can be triggered only after the page is completely loaded. The so-called complete loading is not only after the DOM structure is loaded, but also when all link references are loaded. For example, there are a lot of pictures on the page, and you must wait for each picture to be loaded before it is completely loaded.
Most importantly, the official jQuery documentation clearly states that the load event has poor cross-browser compatibility (It doesn't work consistently nor reliably cross-browser). After a small dish test, Google Chrome only supports $(window).load(fn);, while Firefox supports $(window).load(fn); and $("img").load(fn);.
Therefore, unless necessary, the use of the load event is strongly discouraged.
The ready event can be added to any element, such as $(window).ready(fn);, $(document).ready(fn);, $("div").ready(fn); and so on.
The ready event does not require the page to be fully loaded, it only needs to load the dom structure to trigger.
You should use a lot of $(document).ready() in JQ. Basically, every JS script has this function and sometimes even more than one. Then another loading function, $(window).load, appears relatively. The number of times is very small. The following will introduce the difference between the two and their execution order.
In general, the basic sequence of response loading of a page is: domain name resolution -> loading html -> loading js and css -> loading images and other information .
So when do we use $(document).ready() and when we use $(window).load when writing JS scripts, let's first understand the functions of the two
一、$(document).ready()
Literally, it means that the document is ready. That is, the browser has loaded and parsed the entire html document, the dom tree has been established, and then execute this function
The way it is written in native JavaScript is as follows:
document.ready=function(){
alert("ready");
}
It is written in jQuery as follows:
$(document).ready(function(){
alert("ready");
});
or
$(function(){
alert("ready");
});
2. $(window).load
Executed after all elements in the web page (including all associated files such as pictures in the page, css files, etc.) are completely loaded into the browser
The way it is written in native JavaScript is as follows:
window.onload = function(){
alert("onload");
};
It is written in jQuery as follows:
$(window).load(function(){
alert("onload");
});
The difference between the two is:
1. Execution time is different
$(document).ready() is executed after the page finishes loading HTML and establishes a DOM tree, but this does not mean that all the page's
Some data has been fully loaded, and some large images will not be loaded until a long time after the DOM tree is established, and
$(window).load() is executed after the entire page has been loaded, including some associated files such as pictures.
2. The number of times that can be executed is different
$(document).ready() can appear multiple times in JavaScript code, and the functions or codes in it can be executed; while $(window).load() can only appear once in JavaScript code, if there are multiple $ (window).load(), then only the function or code in the last $(window).load() will be executed, and the previous $(window).load() will be overwritten;
3. The efficiency of execution is different
If you want to add an onclick attribute node to the element node of the dom, then using $(document).ready() is more efficient than using $(window).load(); but at some point you must use $ (window).load() will do
To sum up: $(window).load() is executed after $(document).ready, and it will be executed after all the content in the page is loaded . The timing of using the two is clear at a glance, and you can decide for yourself.