window.onload vs document.ready jQuery

Question

Ich habe eine Website mit zwei Spalten. Ich möchte die gleiche Höhe auf beiden mit jQuery haben.

Ich versuche, die Logo-Spaltenhöhe zu bekommen. Ich hatte:

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

und es hat nicht funktioniert. Also habe ich es geändert in:

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

Und es funktioniert. Was ist hier los?

Answer 1

document ready wird ausgelöst, wenn das DOM geladen wurde, also Informationen wie Höhe nicht verfügbar ist, es sei denn, es ist explizit deklariert.

window onload wartet darauf, dass die Assets auf der Seite vollständig geladen werden - Informationen wie Höhe sind jetzt verfügbar.

Answer 2

Ich hatte ein gleiches Problem in Bildhöhe Handhabung und Breite innerhalb $ (document) bereit, und ich fand einige besseren referenses es zu lösen ... Ich hoffe, das einige eine

$ helfen kann (Dokument). ready()

Das document ready-Ereignis wird ausgelöst, wenn das HTML-Dokument geladen wird und das DOM bereit ist, auch wenn noch nicht alle Grafiken geladen wurden. Wenn Sie Ihre Ereignisse für bestimmte Elemente verknüpfen möchten, bevor das Fenster geladen wird, ist $ (document) .ready der richtige Ort.

Code:

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

$ (Fenster) .load()

Das Fenster Load-Ereignis ein wenig später gefeuert, wenn die komplette Seite vollständig geladen ist, einschließlich aller Bilder, Objekte und Bilder. Daher sollten Funktionen, die Bilder oder andere Seiteninhalte betreffen, in das load-Ereignis für das Fenster oder das Inhalts-Tag selbst gestellt werden.

Code:

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