jQuery——$(文檔)之間的區別是什么?准備好了(窗口).load美元?

[英]jQuery - What are differences between $(document).ready and $(window).load?


What are differences between

之間的區別是什么

$(document).ready(function(){
 //my code here
});

and

$(window).load(function(){
  //my code here
});

And I want to make sure that:

我想確保

$(document).ready(function(){

}) 

and

$(function(){

}); 

and

jQuery(document).ready(function(){

});

are the same.

都是一樣的。

Can you tell me what differences and similarities between them?

你能告訴我他們之間有什么不同和相似之處嗎?

9 个解决方案

#1


367  

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Query 3.0 version

查詢3.0版本

Breaking change: .load(), .unload(), and .error() removed

These methods are shortcuts for event operations, but had several API limitations. The event .load() method conflicted with the ajax .load() method. The .error() method could not be used with window.onerror because of the way the DOM method is defined. If you need to attach events by these names, use the .on() method, e.g. change $("img").load(fn) to $(img).on("load", fn).1

這些方法是事件操作的快捷方式,但有幾個API限制。event .load()方法與ajax .load()方法沖突。error()方法不能與window一起使用。onerror因為DOM方法的定義方式。如果需要用這些名稱附加事件,請使用.on()方法,例如將$(“img”).load(fn)更改為$(img)。(“負載”,fn)。1

$(window).load(function() {});

Should be changed to

應該更改為

$(window).on('load', function (e) {})

These are all equivalent:

這些都是等價的:

$(function(){
}); 

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

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

$(document).on('ready', function(){
})

#2


26  

document.ready is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded. So, if you're using image dimensions for example, you often want to use this instead.

文檔。ready是jQuery事件,它在DOM就緒時運行,例如,所有的元素都在那里可以找到/使用,但不一定是所有的內容。窗口。當加載圖片時,onload隨后(或者在最壞的/失敗的情況下)觸發。如果你用的是圖像尺寸,你通常會用這個。

Also read a related question:
Difference between $(window).load() and $(document).ready() functions

還要閱讀一個相關的問題:$(窗口).load()和$(文檔).ready()函數之間的差異

#3


10  

From the jQuery API Document

來自jQuery API文檔

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.

雖然JavaScript提供了在呈現頁面時執行代碼的加載事件,但是直到所有資產(如圖像)都被完全接收之后,才會觸發此事件。在大多數情況下,只要DOM層次結構完全構建好,腳本就可以運行。傳遞給.ready()的處理程序保證在DOM就緒之后執行,因此這通常是連接所有其他事件處理程序並運行其他jQuery代碼的最佳位置。當使用依賴於CSS樣式屬性值的腳本時,在引用腳本之前引用外部樣式表或嵌入樣式元素是很重要的。

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

在代碼依賴於加載資產(例如,如果需要圖像的維度)的情況下,應該將代碼放置在處理程序中,以處理加載事件。


Answer to the second question -

回答第二個問題-

No, they are identical as long as you are not using jQuery in no conflict mode.

不,只要您不在沖突模式下使用jQuery,它們是相同的。

#4


8  

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.

就緒事件發生在加載HTML文檔之后,而onload事件發生在稍后,當所有內容(例如圖像)也被加載時。

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 functionality to the elements in the page doesn't have to wait for all content to load.

onload事件是DOM中的一個標准事件,而ready事件是特定於jQuery的。就緒事件的目的是,它應該在文檔加載之后盡早發生,以便向頁面中的元素添加功能的代碼不必等待所有內容加載。

#5


7  

This three function are the same.

這三個函數是一樣的。

$(document).ready(function(){

}) 

and

$(function(){

}); 

and

jQuery(document).ready(function(){

});

here $ is used for define jQuery like $ = jQuery.

這里$用於定義jQuery,如$ = jQuery。

Now difference is that

現在不同的是,

$(document).ready is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.

美元(文檔)。就緒是在加載DOM時觸發的jQuery事件,因此在准備好文檔結構時觸發。

$(window).load event is fired after whole content is loaded like page contain images,css etc.

美元(窗口)。加載事件在加載整個內容之后被觸發,如頁面包含圖像、css等。

#6


3  

The Difference between $(document).ready() and $(window).load() functions is that the code included inside $(window).load() will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the document ready event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.

$(document).ready()和$(window).load()函數之間的區別在於,$(window).load()中包含的代碼在加載整個頁面(圖像、iframe、樣式表等)之后才會運行,而文檔准備事件則在加載所有圖像、iframe等之前觸發,但在加載整個DOM本身完成之后才會啟動。


$(document).ready(function(){

}) 

and

$(function(){

});

and

jQuery(document).ready(function(){

});

There are not difference between the above 3 codes.

以上三種代碼沒有區別。

They are equivalent,but you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $ as a shortcut name.

它們是等價的,但是如果其他任何JavaScript框架使用相同的$符號作為快捷名,您可能會遇到沖突。

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

I think you should look at this article : 6 Different Types of $(document).ready() Examples

我認為您應該閱讀本文:6種不同類型的$(document).ready()示例

#7


2  

The ready event is always execute at the only html page is loaded to the browser and the functions are executed.... But the load event is executed at the time of all the page contents are loaded to the browser for the page..... we can use $ or jQuery when we use the noconflict() method in jquery scripts...

准備活動總是在唯一執行html頁面加載到瀏覽器和....執行的函數但加載事件是在將所有頁面內容加載到頁面的瀏覽器時執行的……當我們在jQuery腳本中使用noconflict()方法時,我們可以使用$或jQuery……

#8


2  

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

#9


0  

$(window).load is an event that fires when the DOM and all the content (everything) on the page is fully loaded like CSS, images and frames. One best example is if we want to get the actual image size or to get the details of anything we use it.

美元(窗口)。load是一個事件,當DOM和頁面上的所有內容(所有內容)都被完全加載時(如CSS、圖像和幀),就會觸發這個事件。一個最好的例子是,如果我們想要得到實際的圖像大小或者得到我們使用的任何東西的細節。

$(document).ready() indicates that code in it need to be executed once the DOM got loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.

$(document).ready()表示在加載DOM並准備由腳本操作時,需要執行其中的代碼。它不會等待圖像加載以執行jQuery腳本。

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$(window).load fired after the $(document).ready().

美元(窗口)。在$(文檔).ready()之后加載。

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Above 3 are same, $ is the alias name of jQuery, you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $. If u face conflict jQuery team provide a solution no-conflict read more.

以上3是相同的,$是jQuery的別名,如果其他JavaScript框架使用相同的$符號,您可能會遇到沖突。如果您遇到沖突,jQuery團隊提供解決方案,請閱讀更多。

$(window).load was deprecated in 1.8, and removed in jquery 3.0

美元(窗口)。在1.8中不支持加載,在jquery 3.0中刪除


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/12/06/72f9837ad01100904374bf983586094f.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com