Câu hỏi window.onload vs $ (tài liệu) .ready ()


Sự khác nhau giữa JavaScript window.onload và jQuery $(document).ready() phương pháp?


1087
2017-09-13 06:24


gốc


có thể trùng lặp $ (tài liệu) .ready tương đương không có jQuery - Kzqai


Các câu trả lời:


Các ready sự kiện xảy ra sau khi tài liệu HTML đã được tải, trong khi onload sự kiện xảy ra sau đó, khi tất cả nội dung (ví dụ: hình ảnh) cũng đã được tải.

Các onload sự kiện là một sự kiện tiêu chuẩn trong DOM, trong khi ready sự kiện là đặc trưng cho jQuery. Mục đích của ready sự kiện là nó sẽ xảy ra càng sớm càng tốt sau khi tài liệu đã được tải, để mã bổ sung chức năng cho các phần tử trong trang không phải chờ tất cả nội dung tải.


1111
2017-09-13 06:28



@ baptx: Bạn sai rồi. Các ready biến cố Là cụ thể cho jQuery. Nó đang sử dụng DOMContentLoaded sự kiện nếu nó có sẵn trong trình duyệt, nếu không nó sẽ mô phỏng nó. Không có tương đương chính xác trong DOM vì DOMContentLoaded sự kiện không được hỗ trợ trong tất cả các trình duyệt. - Guffa
Ok nhưng cùng một kết quả tồn tại với DOMContentLoaded, có lẽ bạn nên đã xác định điều này - baptx
@ baptx: Tôi không nghĩ rằng đó là sự liên quan đến câu hỏi này, và tôi vẫn không. - Guffa
@ baptx không cùng một kết quả, tài liệu sẵn sàng xử lý sẽ được bắn ngay cả sau khi setted sau khi DOM là có hiệu quả đã sẵn sàng, sử dụng một lời hứa. DOMContentLoaded sẽ không. Vì vậy, tài liệu jquery sẵn sàng xử lý thực sự có thể hữu ích khi được giải quyết trong tải kịch bản bên ngoài một cách không đồng bộ - A. Wolff
Tại sao downvote? Nếu bạn không giải thích những gì bạn nghĩ là sai, nó không thể cải thiện câu trả lời. - Guffa


window.onload là sự kiện JavaScript được tích hợp sẵn, nhưng khi nó được thực hiện tế nhị quirks trên các trình duyệt (Firefox, Internet Explorer 6, Internet Explorer 8 và Opera), jQuery cung cấp document.ready, tóm tắt những thứ đó và sẽ cháy ngay khi DOM của trang sẵn sàng (không chờ hình ảnh, v.v.).

$(document).ready (lưu ý rằng nó không phải  document.ready, không xác định) là hàm jQuery, gói và cung cấp Tính nhất quán cho các sự kiện sau:

  • document.ondomcontentready / document.ondomcontentloaded - một sự kiện mới phát sinh khi DOM của tài liệu được tải (có thể là một thời gian trước các hình ảnh, vv được tải); một lần nữa, hơi khác trong Internet Explorer và phần còn lại của thế giới
  • window.onload (được triển khai ngay cả trong các trình duyệt cũ), sẽ kích hoạt khi toàn bộ trang tải (hình ảnh, kiểu, v.v.)

124
2017-09-13 06:30



Có một quan niệm sai lầm nhỏ ở đây: load Sự kiện window được triển khai hợp lý nhất quán trên các trình duyệt. Vấn đề mà jQuery và các thư viện khác đang cố gắng giải quyết là vấn đề bạn đề cập, đó là load sự kiện không được kích hoạt cho đến khi tất cả các tài nguyên phụ thuộc như hình ảnh và bảng định kiểu đã được tải, có thể là một thời gian dài sau khi DOM được tải hoàn toàn, hiển thị và sẵn sàng cho tương tác. Sự kiện cháy trong hầu hết các trình duyệt khi DOM sẵn sàng được gọi DOMContentLoaded, không phải DOMContentReady. - Tim Down
@Tim Down: hợp lý là từ khóa ở đây; ít nhất một số đối tượng sniffing được sử dụng là cần thiết, ngay cả với onload (có sự khác biệt wrt FF / IE / Opera). Đối với DOMContentLoaded, bạn hoàn toàn đúng. Chỉnh sửa để làm rõ. - Piskvor
Những loại đối tượng sniffing bạn có nghĩa là gì? - Tim Down
@Tim Down: Tôi biết Opera đã có nó, nhưng sự kiện kích hoạt trên nó hơi kỳ quặc (để kích hoạt đáng tin cậy, document.onload có thể sử dụng được). Theo như window.onload đi: window.onload = fn1;window.onload=fn2; - chỉ fn2 sẽ được gọi là onload. Một số máy chủ web miễn phí chèn mã của riêng họ vào tài liệu và đôi khi điều này đã mã hóa mã trong trang. - Piskvor
Không viết "document.ready" không đúng? đối tượng tài liệu không có một phương thức sẵn sàng, đối tượng jQuery nào được trả về từ cuộc gọi $ (tài liệu). Vui lòng chỉnh sửa câu trả lời này nếu tôi đúng vì điều này rất khó hiểu. - A. Sallai


$(document).ready() là một sự kiện jQuery. JQuery’s $(document).ready() phương thức được gọi ngay sau khi DOM sẵn sàng (có nghĩa là trình duyệt đã phân tích cú pháp HTML và xây dựng cây DOM). Điều này cho phép bạn chạy mã ngay sau khi tài liệu sẵn sàng để được thao tác.

Ví dụ, nếu một trình duyệt hỗ trợ sự kiện DOMContentLoaded (như nhiều trình duyệt không phải IE), thì nó sẽ kích hoạt sự kiện đó. (Lưu ý rằng sự kiện DOMContentLoaded chỉ được thêm vào IE trong IE9 +.)

Hai cú pháp có thể được sử dụng cho điều này:

$( document ).ready(function() {
   console.log( "ready!" );
});

Hoặc phiên bản viết tắt:

$(function() {
   console.log( "ready!" );
});

Các điểm chính cho $(document).ready():

  • Nó sẽ không chờ đợi cho các hình ảnh được tải.
  • Được sử dụng để thực thi JavaScript khi DOM được tải hoàn toàn. Đặt trình xử lý sự kiện tại đây.
  • Có thể được sử dụng nhiều lần.
  • Thay thế $ với jQuery khi bạn nhận được "$ không được xác định."
  • Không được sử dụng nếu bạn muốn thao tác hình ảnh. Sử dụng $(window).load() thay thế.

window.onload() là một hàm JavaScript gốc. Các window.onload() sự kiện cháy khi tất cả nội dung trên trang của bạn đã tải, bao gồm DOM (mô hình đối tượng tài liệu), quảng cáo biểu ngữ và hình ảnh. Một sự khác biệt giữa hai là, trong khi chúng ta có thể có nhiều hơn một $(document).ready() chức năng, chúng tôi chỉ có thể có một onload chức năng.


78
2017-08-20 16:00



Điểm nhỏ: Thảo luận về IE được viết rất kém. Nó không phải là IE (8 và trước đó) "không thể bắn an toàn" cho đến khi readyState của tài liệu hoàn thành, đó là IE thiếu sự kiện DOMContentLoaded. Không phải là vấn đề "an toàn", mà là một tính năng còn thiếu trong IE, được thêm vào trong IE 9. - ToolmakerSteve
Bạn đúng, vì vậy tôi đã chỉnh sửa câu trả lời để phản ánh nhận xét của bạn và cảm ơn! - James Drinkard
Bạn nói "Nó sẽ không chờ đợi cho các hình ảnh để được tải." những gì về các tập tin khác, js quan trọng nhất? Thường thì trước khi gọi chức năng từ một tập tin khác - tôi cần phải biết nếu nó được nạp. - Darius.V
Đây là một chủ đề hoàn toàn khác, nhưng nếu tôi hiểu những gì bạn đang hỏi, nó dựa trên cách bạn cấu trúc trang của bạn, bao gồm thứ tự bạn đặt các tệp js. Đây là một liên kết đi vào chi tiết hơn: ablogaboutcode.com/2011/06/14/… HTH, James - James Drinkard
Ngoài ra, $ (tài liệu) .ready () của nó, không phải document.ready (). - Undefined


A Tải Windows sự kiện cháy khi tất cả nội dung trên trang của bạn được tải đầy đủ bao gồm nội dung DOM (mô hình đối tượng tài liệu) và JavaScript không đồng bộ, khung và hình ảnh. Bạn cũng có thể sử dụng body onload =. Cả hai đều giống nhau; window.onload = function(){}<body onload="func();"> là những cách khác nhau để sử dụng cùng một sự kiện.

jQuery $document.ready sự kiện hàm thực hiện sớm hơn một chút so với window.onload và được gọi khi DOM (Mô hình đối tượng tài liệu) được tải trên trang của bạn. Nó sẽ không chờ đợi cho hình ảnh, khung hình để tải đầy đủ.

Lấy từ bài viết sau: làm sao $document.ready() la khac nhau tư window.onload()


38
2017-09-17 07:09



Tôi nghĩ đây là câu trả lời hay nhất! - Haoyu Chen
Tôi có thể đồng ý, nếu nó không được sao chép từng từ. - Kevin B


Một lời cảnh cáo về việc sử dụng $(document).ready() với Internet Explorer. Nếu yêu cầu HTTP bị gián đoạn trước toàn bộ tài liệu được tải (ví dụ, trong khi một trang đang truyền trực tuyến đến trình duyệt, một liên kết khác được nhấp vào) IE sẽ kích hoạt $(document).ready biến cố.

Nếu bất kỳ mã nào trong $(document).ready() sự kiện tham chiếu các đối tượng DOM, tiềm năng tồn tại cho các đối tượng đó không được tìm thấy, và các lỗi Javascript có thể xảy ra. Hoặc là bảo vệ các tham chiếu của bạn đến các đối tượng đó hoặc trì hoãn mã tham chiếu đến các đối tượng đó tới sự kiện window.load.

Tôi đã không thể tạo lại sự cố này trong các trình duyệt khác (cụ thể là Chrome và Firefox)


21
2017-08-27 18:56



Phiên bản IE nào? Tôi biết tôi nên quan tâm đến khả năng tương thích, nhưng thật khó với IE. Có thể chấp nhận sử dụng document.ready chỉ cho JavaScript không? - mishmomo
IE6, 7 và 8. Xem: stackoverflow.com/questions/13185689/… - James Drinkard
Tốt để biết, cảm ơn! - mkoistinen


$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


18
2018-02-26 12:30





Sự kiện

$(document).on('ready', handler) liên kết với sự kiện sẵn sàng từ jQuery. Trình xử lý được gọi khi DOM được tải. Tài sản như hình ảnh có thể vẫn còn thiếu. Nó sẽ không bao giờ được gọi nếu tài liệu đã sẵn sàng tại thời điểm ràng buộc. jQuery sử dụng Đã tải DOMContentLoaded-Event for that, mô phỏng nó nếu không có sẵn.

$(document).on('load', handler) là một sự kiện sẽ được kích hoạt sau khi tất cả tài nguyên được tải từ máy chủ. Hình ảnh được tải ngay bây giờ. Trong khi đang tải là sự kiện HTML thô, sẳn sàng được xây dựng bởi jQuery.

Chức năng

$(document).ready(handler) thực sự là một lời hứa. Trình xử lý sẽ được gọi ngay lập tức nếu tài liệu sẵn sàng tại thời điểm gọi. Nếu không nó liên kết với ready-Biến cố.

Trước jQuery 1.8, $(document).load(handler) tồn tại như một bí danh $(document).on('load',handler).

Đọc thêm


15
2018-06-02 10:38



bạn có thể giải thích $ (tài liệu) .load (handler) hoạt động giống như ràng buộc với sự kiện tải. Không giống như $ .fn.ready, nó sẽ không gọi qua ngay lập tức? - Nabeel Khan
Tôi nghĩ bạn bị bối rối bởi $.fn.load mà không hoạt động như chất kết dính sự kiện nữa. Trong thực tế, nó đã lỗi thời kể từ jquery 1.8. Tôi cập nhật nó cho phù hợp - abstraktor
yap! chính xác, cảm ơn :) - Nabeel Khan


window.onload:  Một sự kiện JavaScript bình thường.

document.ready:  Một sự kiện jQuery cụ thể khi toàn bộ HTML đã được tải.


11
2018-03-03 06:52





Document.ready (một sự kiện jQuery) sẽ kích hoạt khi tất cả các phần tử được đưa ra, và chúng có thể được tham chiếu trong mã JavaScript, nhưng nội dung không nhất thiết phải được nạp. Document.ready thực thi khi tài liệu HTML được tải.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Các window.load tuy nhiên sẽ đợi trang được tải đầy đủ. Điều này bao gồm khung bên trong, hình ảnh, v.v.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

11
2017-11-07 20:54





Một điều cần nhớ (hoặc tôi nên nói nhớ lại) là bạn không thể ngăn xếp onloadgiống như bạn có thể ready. Nói cách khác, phép thuật jQuery cho phép nhiều readytrên cùng một trang, nhưng bạn không thể làm điều đó với onload.

Cuối cùng onload sẽ overrule bất kỳ trước đó onloadS.

Một cách hay để đối phó với điều đó là với một chức năng rõ ràng được viết bởi một Simon Willison và được mô tả trong Sử dụng nhiều chức năng tải lên JavaScript.

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

8
2017-10-13 14:52