Sollten jquery tabs innerhalb von document.ready sein?

Question

Ich bin ein wenig verwirrt, was document.ready genau macht. Laut dem Tutorial von John Resig sollte document.ready Code enthalten, der ausgeführt werden muss, wenn die Seite fertig geladen ist.

Was ist, wenn ich Code habe, der Tabs deklariert... oder Code, der Zebra-Streifen auf Tabellen setzt?

Sollte das alles unter document.ready gehen? Gibt es nicht Fälle, in denen Benutzer zuerst den geladenen Inhalt sehen und dann die Zebra-Highlights und Tabs geladen werden?

Answer 1

Hervorragender Punkt... aber das Problem ist, was ist, wenn du deinen Code für die Zebra-Streifen AUSFÜHRST, BEVOR der Inhalt geladen ist, auf den er sich auswirkt? Da liegt das Problem.

Es ist möglich, dein JS innerhalb deines Inhalts zu streuen, damit der Inhalt darüber natürlich geladen wird, bevor es ausgeführt wird... aber sind die erforderlichen jQuery-Bibliotheken, die dieses JS benötigt, auch geladen? Jetzt gibt es noch mehr, was schief gehen kann.

Denke auch daran, dass das jQuery Ready-Ereignis immer noch vor dem klassischen document.onLoad-Ereignis ausgeführt wird. (das auch auf das Beenden des Ladens von Bildern wartet)

Answer 2

Natürlich könnten Sie immer noch klassisches JavaScript für einfache Dinge wie Zebra-Streifen verwenden und jQuery für schwierigere Aufgaben.

Answer 3

Im Allgemeinen sollten Änderungen, die das DOM betreffen, innerhalb von document.ready platziert werden. Also ja, deine Registerkarten und Zebra-Streifen sollten dort hin.

Answer 4

Sie sollten den Code für jQuery-Registerkarten innerhalb der onDOMReady-Funktion platzieren. Auf der sicheren Seite verwenden Sie die Funktion, die jQuery bereitstellt:

$(function(){
    // Setzen Sie hier Ihren Registerkarten-/Zebra-Streifen-Code ein
});

Indem Sie diese Funktion verwenden, stellen Sie sicher, dass der erforderliche Code ausgeführt wird, wenn der DOM für Modifikationen bereit ist (aber die Seite selbst möglicherweise noch nicht vollständig geladen wurde). Ihr anderer Code, der bei document.ready geladen wird, wäre wahrscheinlich auch besser in dieser Funktion aufgehoben, da die Verwendung von document.ready dazu führen kann, dass Benutzer auf dem Bildschirm flackern sehen, wenn dynamisches JavaScript geladen wird.

Answer 5

Das ready-Ereignis wird ausgelöst, wenn der DOM vollständig geladen wurde, während das load-Ereignis ausgelöst wird, wenn der DOM geladen ist + alle vom DOM referenzierten Bilder auch heruntergeladen wurden.

Dies bedeutet, dass Sie das ready-Ereignis verwenden sollten, es sei denn, Ihr Initialisierungscode verwendet Bilder aus dem DOM. Sehen Sie sich diese Seite als Beispiel dafür an, was passiert, wenn Sie versuchen, auf Bilder aus dem DOM in Ihrem load-Ereignis zuzugreifen.