window.onload vs document.ready jQuery

Question

Tôi có một trang web có hai cột. Tôi muốn có chiều cao bằng nhau trên cả hai bằng cách sử dụng jQuery.

Tôi đang cố gắng lấy chiều cao cột biểu tượng. Tôi đã có:

$(document).ready(function() { 
    alert($('#logo').height()); 
});​ 

và nó không hoạt động. Vì vậy, tôi đã thay đổi nó thành:

window.onload = function(){ 
    alert($('#logo').height()); 
} 

Và nó hoạt động. Điều gì đang xảy ra ở đây?

Answer 1

document ready được kích hoạt khi DOM đã tải, vì vậy thông tin như chiều cao không khả dụng, trừ khi thông tin được khai báo rõ ràng.

window onload đợi nội dung trong trang được tải hoàn toàn - vì vậy thông tin như chiều cao hiện khả dụng.

Answer 2

Tôi đã có một vấn đề tương tự trong việc xử lý hình ảnh chiều cao và chiều rộng bên trong $ (document) sẵn sàng và tôi tìm thấy một số referenses tốt hơn để giải quyết nó ... Tôi hy vọng điều này có thể giúp một số một

$ (tài liệu). sẵn sàng()

Sự kiện sẵn sàng tài liệu được kích hoạt khi tài liệu HTML được tải và DOM đã sẵn sàng, ngay cả khi tất cả đồ họa chưa được tải. Nếu bạn muốn kết nối các sự kiện của mình cho các phần tử nhất định trước khi cửa sổ tải, thì $ (document) .ready là đúng vị trí.

Code:

$(document).ready(function() { 
    // document is loaded and DOM is ready 
    alert("document is ready"); 
}); 

$ (window) .load()

Sự kiện tải cửa sổ bắn một chút sau, khi trang hoàn toàn là nạp đầy đủ, bao gồm tất cả các khung, đối tượng và hình ảnh. Do đó, các chức năng liên quan đến hình ảnh hoặc nội dung trang khác phải được đặt trong sự kiện tải cho cửa sổ hoặc chính thẻ nội dung.

Code:

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