Sự khác biệt giữa các hàm $ (window) .load () và $ (document). Yet ()


216

Sự khác biệt giữa $(window).load(function() {})$(document).ready(function() {})trong jQuery là gì?

Câu trả lời:


266
  • document.readylà một sự kiện jQuery, nó chạy khi DOM đã sẵn sàng, ví dụ: tất cả các yếu tố đều được tìm thấy / sử dụng, nhưng không nhất thiết phải là tất cả nội dung .
  • window.onloadkích hoạt sau (hoặc cùng lúc trong trường hợp xấu nhất / không thành công) khi hình ảnh và những thứ đó được tải, vì vậy nếu bạn đang sử dụng kích thước hình ảnh chẳng hạn, bạn thường muốn sử dụng thay thế.

38
tốc ký $(document).ready(function(){})$(function(){})và một sự khác biệt quan trọng khác từ window.load là nó sẽ chạy trên TẤT CẢ các lệnh gọi trong tương lai của hàm, ngay cả sau khi DOM đã ban đầu.
Michael Butler

2
@dbliss Có Tôi tin rằng onload là tốc ký $(window).on('load'). Cả hai đều tham khảo sự kiện tải .
Lancer miễn phí

5
@MichaelButler - Ý bạn là it will run on ALL future calls of the functiongì?
Sinh ra ToCode

7
@MichaelButler: Bạn cần phải rõ ràng hơn trong bình luận của bạn. 1) Bạn đang nói về việc NGƯỜI DÙNG thực thi nhiều $(document).readymã hơn sau khi DOM sẵn sàng. Đó là một trường hợp sử dụng nhỏ đến mức có lẽ không đáng để mọi người nhầm lẫn khi đề cập đến nó. 2) MÔI TRƯỜNG chỉ gọi $(document).ready(f‌​unction(){})một lần, khi DOM đã sẵn sàng. Nếu người dùng, vì một số lý do, thực thi nhiều hơn $(document).readysau khi DOM sẵn sàng, thì có, nó sẽ được thực thi ngay lập tức.
Doug S

4
Tôi cầu xin khác biệt, Michael. Chúng ta hãy để nó ở đây và không suy giảm thành những bình luận vô ích. Ít nhất những người bối rối bây giờ có câu trả lời của họ.
Doug S

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


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

22

Cái $(window).load()này KHÔNG có sẵn trong jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

Để giải quyết vấn đề này, bạn có thể sử dụng nó như một "Tệp đính kèm xử lý sự kiện"

$( window ).on("load", function() {
        // Handler for .load() called.
});

14

Sự khác biệt là:

$(document).ready(function() { là sự kiện jQuery được kích hoạt khi DOM được tải, do đó, nó được kích hoạt khi cấu trúc tài liệu đã sẵn sàng.

$(window).load() sự kiện được kích hoạt sau khi toàn bộ nội dung được tải.


9
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load sẽ được kích hoạt sau khi tất cả nội dung iframe được tải


7

$(document).ready xảy ra khi tất cả các yếu tố có mặt trong DOM, nhưng không nhất thiết là tất cả nội dung.

$(document).ready(function() {
    alert("document is ready");
});

window.onloadhoặc $(window).load()xảy ra sau khi tất cả các tài nguyên nội dung (hình ảnh, v.v.) đã được tải.

$(window).load(function() {
    alert("window is loaded");
});


0

document. yet (jQuery) document. yet sẽ thực thi ngay sau khi tài liệu HTML được tải thuộc tính và DOM đã sẵn sàng.

DOM: Mô hình đối tượng tài liệu (DOM) là một quy ước đa nền tảng và độc lập với ngôn ngữ để thể hiện và tương tác với các đối tượng trong các tài liệu HTML, XHTML và XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (JavaScript tích hợp) Tuy nhiên window.load sẽ đợi trang được tải đầy đủ, bao gồm các khung bên trong, hình ảnh, v.v. * window.load là một phương thức JavaScript tích hợp, được biết là có một số quirks trong các trình duyệt cũ (IE6, IE8, phiên bản FF và Opera cũ) nhưng thường sẽ hoạt động trong tất cả các trình duyệt.

window.load có thể được sử dụng trong sự kiện onload của cơ thể như thế này (nhưng tôi thực sự khuyên bạn nên tránh trộn mã như thế này trong HTML, vì đây là một nguồn gây nhầm lẫn sau này):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

0

$ (window) .load là một sự kiện kích hoạt khi DOM và tất cả nội dung (mọi thứ) trên trang được tải đầy đủ như CSS, hình ảnh và khung. Một ví dụ tốt nhất là nếu chúng ta muốn có được kích thước hình ảnh thực tế hoặc để có được các chi tiết của bất cứ điều gì chúng ta sử dụng nó.

$ (tài liệu). yet () chỉ ra rằng mã trong đó cần được thực thi khi DOM được tải và sẵn sàng để được thao tác bởi tập lệnh. Sẽ không chờ hình ảnh được tải để thực thi tập lệnh 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 được kích hoạt sau $ (tài liệu). yet ().

$ (window) .load không được dùng nữa trong 1.8 và bị xóa trong jquery 3.0


0

Tôi nghĩ rằng $(window).loadsự kiện này không được JQuery 3.x hỗ trợ


1
Theo tài liệu , sự kiện .load (cửa sổ) đã bị xóa trong JQuery 3.0
Mathieu VIALES

1
Chính xác. Để giải quyết vấn đề này, bạn có thể sử dụng nó như một "Phần đính kèm xử lý sự kiện": $ (window) .on ("load", function () {// Handler cho .load () được gọi.});
Kean Amaral

0

Theo DOM Cấp 2 Sự kiện, loadsự kiện này được cho là sẽ tiếp tục documentchứ không phải trên window. Tuy nhiên, loadđược triển khai trên windowtất cả các trình duyệt để tương thích ngược.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.