warten bis dom fertig

iberican · 03. Sep. 2008

Hallo,
ich habe ein gravierendes Verständnisproblem.
(Es sind Grundlagen, doch ich bitte um Nachsicht)

Ich möchte auf ein Dom element zugreifen und einen event handler zuweisen, doch das problem ist, dass der dom noch nicht geladen ist. Wie kann ich mit meinem script warten bis der dom bereit ist. was ist hier best practice?(bitte kein inline js)

Code:

<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div>bla</div>
<div>blupp</div>
<div>blupp</div>
</body>
</html>

mains.js

Code:

var x = document.getElementsByTagName('div')	
x.addEventHandler('click',irgendeinefunc, true)

Shibb · 24. Juli 2014

Code:

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
    	//do something
    	clearInterval(readyStateCheckInterval);
    }
}, 500);

tsseh · 24. Juli 2014

Shibb schrieb:
var readyStateCheckInterval = setInterval(function() {

polling ist nun die schlechteste variante
* traditionell
* dom events
* mit jquery

j-l-n · 24. Juli 2014

@iberican: DOMContentLoaded - Event reference | MDN ist was du suchst. Also der zweite Link von hesst; window.onload (der erste) wird nämlich erst gefeuert, wenn die Seite inklusive eingebundenen Grafiken/etc. vollständig geladen wurde.
Das kannst du ausprobieren, indem du eine Testseite mit einem großen eingebundenen Bild erstellst, und dann in der Konsole nachschaust, wann welches Event feuert:

Code:

document.addEventListener("DOMContentLoaded", function(){
  console.log("DOM fertig geparst.");
});
window.onload = function(){
  console.log("Seite vollständig geladen.");
};

mikdoe · 24. Juli 2014

Leute, der Thread ist aus 2008!?

j-l-n · 24. Juli 2014

mikdoe schrieb:
Leute, der Thread ist aus 2008!?

Oh, ich seh's gerade...
@Shibb: wieso holst du jahrealte Threads wieder hoch??

mbrain · 24. Juli 2014

hi. es werden vermutlich auch in zukunft noch leute über google auf den thread kommen (wie ich z.B gerade) und antworten suchen.
Ich hoffe es ist ok wenn ich trotzdem einen kleinen lösungsansatz poste

dieser ansatz hat auch eine weiche für den IE drin.

Code:

if (window.addEventListener)
        window.addEventListener("load", deine_jsfunktion, false);
    else if (window.attachEvent)
        window.attachEvent("onload", deine_jsfunktion);
    else 
        window.onload = deine_jsfunktion;

lg

j-l-n · 24. Juli 2014

mbrain schrieb:
dieser ansatz hat auch eine weiche für den IE drin.

...die man allerdings mittlerweile nicht mehr wirklich braucht.
Und nochmal mein Hinweis: window.onload ist in diesem Zusammenhang falsch!
Es wurde explizit nach dem Event gefragt, wenn das DOM fertig geparst ist, und nicht wenn die gesamte Seite fertig geladen ist!

mbrain · 24. Juli 2014

der IE ist (leider) noch immer weit verbreitet und ich würde jedem raten ihn mit einzubeziehen. und wie ich geschrieben habe ist es ein ansatz. ein ansatz das laden des doms zu handeln also eben wie gefragt (wenn das dom fertig geladen ist)

wo war parsen eine explizite frage? wollte jetzt nicht den kompletten code mit callback posten. du kannst aber gerne deine eigene antwort geben wenn du meinst es besser zu wissen ^^ wundert mich sowieso wieso hierkeiner eine richtige antwort auf das problem postet.. ist doch eindeutig das es eine anfängerfrage ist..

j-l-n · 24. Juli 2014

mbrain schrieb:
der IE ist (leider) noch immer weit verbreitet

Es geht hier aber nur um den IE≤8 - und da lässt sich streiten, ob man den noch unterstützen muss...

Und nochmal zum Unterschied zwischen .onload und DOMContentLoaded:

window.onload is rarely used, because no one wants to wait until all resources load, especially for large pictures.
Normally, we need the DOM and scripts to build interfaces. That’s exactly what DOMContentLoaded is for.
onLoad and onDOMContentLoaded | JavaScript Tutorial

- - - Aktualisiert - - -

mbrain schrieb:
wundert mich sowieso wieso hierkeiner eine richtige antwort auf das problem postet

Aha, die Antworten von mir und hesst sind also keine "richtigen"??

tsseh · 24. Juli 2014

Julian schrieb:
...die man allerdings mittlerweile nicht mehr wirklich braucht.

vorsicht

Julian schrieb:
Und nochmal mein Hinweis: window.onload ist in diesem Zusammenhang falsch!

nee, der ansatz ist genau richtig. so sollte man es machen, und so macht es auch jquery

Julian schrieb:
Es wurde explizit nach dem Event gefragt, wenn das DOM fertig geparst ist, und nicht wenn die gesamte Seite fertig geladen ist!

wenn die gesamte Seite fertig geladen ist, ist auch das DOM fertig geparst.

mbrain · 24. Juli 2014

über den ie streiten ist mir zu blöd ich beziehe ihn sogut wie immer mit ein da er de facto von manchen noch benutzt wird.. und NOCHMAL. meine funktion ist zum zeitlich korrekten aufrufen eines callback gedacht und nicht um das element schon zu löschen!! das element zu löschen wird wohl kein problem sein und danach hat er auch nicht gefragt!

ich bin jetzt hier raus wer es ausprobiert und nur ein wenig ahnung von js und callback funktionen hat wird es brauchen können. wäre besser ihr beantwortet die fragen direkt anstatt nur um den heissen brei zu reden.

tsseh · 24. Juli 2014

mbrain schrieb:
das element zu löschen wird wohl kein problem sein und danach hat er auch nicht gefragt!

wie kommst du jetzt auf löschen?

mbrain schrieb:
wäre besser ihr beantwortet die fragen direkt anstatt nur um den heissen brei zu reden.

in #3 ist doch alles relevante enthalten? wo ist das problem?

kkapsner · 25. Juli 2014

hesst schrieb:
nee, der ansatz ist genau richtig.

Also ich würde da auch onDOMContentLoaded verwenden - das ist einfach direkt nachdem

iberican schrieb:
der dom bereit ist

- onload kann da noch ein paar Sekunden auf sich warten lassen. Und jQuery arbeitet, soweit ich weiß, auch damit...

tsseh · 25. Juli 2014

kkapsner schrieb:
Also ich würde da auch onDOMContentLoaded verwenden - das ist einfach direkt nachdem - onload kann da noch ein paar Sekunden auf sich warten lassen. Und jQuery arbeitet, soweit ich weiß, auch damit...

keine ahnung ob ich mich so undeutlich ausdrücke. genau das hab ich doch in #3 verlinkt, und in dem letzten post gesagt, onDOMContentLoaded mit onload fallback, so wie es mbrain gepostet hat und jquery es auch macht.

miniA4kuser · 25. Juli 2014

hesst schrieb:
keine ahnung ob ich mich so undeutlich ausdrücke. genau das hab ich doch in #3 verlinkt, und in dem letzten post gesagt, onDOMContentLoaded mit onload fallback, so wie es mbrain gepostet hat und jquery es auch macht.

Meiner Meinung nach hast du dir das anders gedacht als du es geschrieben hast.

Denn hier:

hesst schrieb:
Julian schrieb:

Und nochmal mein Hinweis: window.onload ist in diesem Zusammenhang falsch!

Zum Vergrößern anklicken....

nee, der ansatz ist genau richtig. so sollte man es machen, und so macht es auch jquery

steht nichts von einem onload fallback. Auch wird in den Beiträgen von mbrain nichts von einem onload fallback gesagt, sondern das Beispiel als ein Ansatz ohne cllbacks beschrieben. Genauso in deinem Beitrag #3. Dort werden 3 Ansätze verlinkt und fertig. Wie soll ich als Anfänger verstehen, das ich deinen verlinkten Ansatz 2 mit deinem verlinkten Ansatz 1 als fallback kombinierten muss? Letztlich werde ich wahrscheinlich den verlinkten Ansatz 3 verwenden, weil dieser so funktioniert und ich als Anfänger bestimmt nicht das jQuery-Framework analysiere um zu sehen wie das genau funktioniert...

Und was willst du mit dieser Antwort:

hesst schrieb:
Julian schrieb:

Es wurde explizit nach dem Event gefragt, wenn das DOM fertig geparst ist, und nicht wenn die gesamte Seite fertig geladen ist!

Zum Vergrößern anklicken....

wenn die gesamte Seite fertig geladen ist, ist auch das DOM fertig geparst.

genau aussagen? Logisch das das DOM fertig geparst ist, wenn die gesamte Seite fertig geladen ist. Genauso wie z.B. alle Bilder fertig geladen sind, oder alle Subframes, oder alle Stylesheets usw...
Das hat der TE aber nicht gefragt, sondern nur nach dem DOM. Wieso also dann wieder dein Verweis auf die gesamte Seite? Ich verstehe es ehrlich gesagt nicht...

j-l-n · 25. Juli 2014

Danke, miniA4k! Genauso habe ich es gemeint... :eagerness:

tsseh · 11. Aug. 2014

miniA4kuser schrieb:
Denn hier:steht nichts von einem onload fallback. Auch wird in den Beiträgen von mbrain nichts von einem onload fallback gesagt, sondern das Beispiel als ein Ansatz ohne cllbacks beschrieben.

ohne DOMContentLoaded, ja - da hatte ich wohl nicht genau hingesehen, ich dachte er hatte die 1. beiden fälle DOMContentLoaded genutz, war aber auch onload

miniA4kuser schrieb:
Genauso in deinem Beitrag #3. Dort werden 3 Ansätze verlinkt und fertig.

ja, da steht doch alles was man benötigt

miniA4kuser schrieb:
Wie soll ich als Anfänger verstehen, das ich deinen verlinkten Ansatz 2 mit deinem verlinkten Ansatz 1 als fallback kombinierten muss?

muss man ja nicht, wenn einem eine lösung für ie >= 9 ausreicht, wenn nicht, liegt die fallbacklösung auf der hand

miniA4kuser schrieb:
und ich als Anfänger bestimmt nicht das jQuery-Framework analysiere um zu sehen wie das genau funktioniert...

nicht? genau das hätte ich gemacht, aber jQuery hatte ich nicht zum analysieren verlinkt, sondern zur nutzung

miniA4kuser schrieb:
Und was willst du mit dieser Antwort:genau aussagen?

das onload ein super fallback ist

miniA4kuser schrieb:
Genauso wie z.B. alle Bilder fertig geladen sind, oder alle Subframes, oder alle Stylesheets usw...

ja und?

miniA4kuser schrieb:
Das hat der TE aber nicht gefragt, sondern nur nach dem DOM.

und das dom ist bei onload zu 100% fertig geparst.

j-l-n · 11. Aug. 2014

hesst schrieb:
und das dom ist bei onload zu 100% fertig geparst.

Ja, aber es ging doch wie gesagt nur um das DOM, und das ist schon früher fertig. Denn dann könnte ich genauso z.B.

Code:

window.setTimeout(domIsReady, 600000);

verwenden, dann ist das Dokument auch fertig geparst...

tsseh · 11. Aug. 2014

Julian schrieb:
Ja, aber es ging doch wie gesagt nur um das DOM, und das ist schon früher fertig.

und wenn ich keine möglichkeit habe das herauszufinden, wie in alten browsern, dann mache ich was?

Julian schrieb:
Denn dann könnte ich genauso z.B.

Code:

window.setTimeout(domIsReady, 600000);

verwenden, dann ist das Dokument auch fertig geparst...

nein, nach 600 sekunden ist die wahrscheinlichkeit hoch, dass es fertig geparst ist, aber es ist nicht sicher fertig geparst. bei onload ist es sicher fertig, und vermutlich deutlich eher.

warten bis dom fertig

New member

New member

Lounge-Member

j-l-n

Guest

Moderator

j-l-n

Guest

New member

j-l-n

Guest

New member

j-l-n

Guest

Lounge-Member

New member

Lounge-Member

Super Moderator

Lounge-Member

Lounge-Member

j-l-n

Guest

Lounge-Member

j-l-n

Guest

Lounge-Member