Sự khác nhau giữa `$ (cửa sổ) .load (function() {})` và `$ (function() {})`

Question

Tôi đã sử dụng $(window).load(function(){}); cho các dự án của mình cho đến khi tôi thấy ai đó nói rằng chúng tôi có thể sử dụng $(function(){}); và chúng sẽ hoạt động giống hệt nhau.
Nhưng bây giờ tôi có nhiều kinh nghiệm hơn, tôi đã nhận thấy rằng chúng không giống nhau. Tôi nhận thấy rằng đoạn đầu tiên sẽ xuất hiện một chút sau đoạn mã thứ hai.
Tôi chỉ muốn biết sự khác biệt là gì?

Answer 1

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

sẽ đợi cho đến khi tài liệu được nạp (cây DOM được nạp) chứ không phải đến khi toàn bộ cửa sổ được tải. ví dụ Nó sẽ không chờ đợi cho các hình ảnh, css hoặc javascript được nạp đầy đủ. Một khi DOM được nạp với tất cả các thành phần HTML và xử lý sự kiện các tài liệu đã sẵn sàng để được xử lý và sau đó là $ (document) .ready() sẽ hoàn thành

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

này đợi cho toàn bộ cửa sổ được nạp vào. Khi toàn bộ trang được tải thì chỉ có $ (window) .load() được hoàn tất. Do đó rõ ràng $ (document) .ready (function() {}) kết thúc trước $ (window) .load() vì việc điền các thành phần (như hình ảnh, css) mất nhiều thời gian hơn sau đó chỉ cần nạp cây DOM.

Vì vậy $(function(){}); không thể được sử dụng như một sự thay thế cho $(window).load(function(){});

Answer 2

$(window).load từ kinh nghiệm của tôi chờ đợi cho đến khi tất cả mọi thứ bao gồm cả hình ảnh được nạp trước khi chạy nơi như $(function() {}); có hành vi tương tự như $(document).ready(function() {});

Xin vui lòng ai đúng cho tôi nếu tôi sai.

Answer 3

Thứ hai là/là lối tắt cho $(document).ready(), sẽ chạy trước sự kiện tải của window.

Lưu ý rằng $(document).ready() là cách ưa thích để gắn kết thứ gì đó với số document tải; có một vài cách khác để thực hiện nó giống như cách bạn thể hiện, nhưng điều đó được ưa thích hơn.

Answer 4

Từ chính bản thân số jQuery docs.

Việc đầu tiên mà các lập trình viên Javascript nhất kết thúc làm là thêm một số mã để chương trình của họ, tương tự như sau:

window.onload = function(){ alert("welcome"); } 

Bên trong đó là mã mà bạn muốn chạy ngay khi trang được tải . Tuy nhiên, có vấn đề, mã Javascript không chạy cho đến khi tất cả các hình ảnh được tải xuống xong (bao gồm cả quảng cáo biểu ngữ). Lý do cho việc sử dụng window.onload ở nơi đầu tiên là HTML 'document' chưa được tải xong, khi bạn lần đầu tiên thử chạy mã của bạn.

Để giải quyết, jQuery có một tuyên bố đơn giản để kiểm tra tài liệu và chờ đợi cho đến khi nó sẵn sàng để được thao tác, được gọi là sự kiện đã sẵn sàng:

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

Bây giờ,

$(window).load(function(){}); bằng window.onload = function(){ alert("welcome"); }

Và, $(function(){}); là một phím tắt để $(document).ready(function(){ });

Tôi nghĩ rằng, điều này sẽ xóa tất cả mọi thứ :)