offsetLeft et arbre DOM

**pas30** · 06/12/2009, 07h58

Bonjour,

J'utilise la propriété offsetLeft, offsetTop et offsetParent afin de retrouver la position d'un élément sur une page
Celà fonctionne mais jusqu'à maintenant j'exécutais ma fonction à l'évènement load de la page donc une fois que la page est chargée et il faudrait que je puisse gagner du temps et savoir la position avant la fin de chargement de la page car très souvent il y a des scripts qui continuent à se charger longtemps empêchant le lancement de ma fonction
Le problème qu'il y a vient de l'arbre DOM. Mon script affiche à l'écran une image et ensuite essaie de rechercher sa position afin de savoir si elle sera visible à l'écran de l'internaute ou non. J'ai entendu que le souci c'est qu'il faudrait attendre le chargement complet de la page pour récupérer des positions d'objets sur une page. Pouvez vous m'expliquer comment l'objet DOM tree fonctionne
Lorsque ma fonction s'éxécute après le body, le DOM TREE n'est-il pas encore créé et donc accessible rendant de ce fait ma fonction inopérante ???
Car j'ai lancé ma fonction sans l'évènement Load et celà a bizarrement fonctionné alors qu'il parait que celà ne doit pas
Help please je ne veux pas être surpris si celà ne devait pas marcher finalement

**V.G.T** · 06/12/2009, 19h51

Bonjour,
Dans l'ordre de chargement:
Un arbre DOM se remplis , il existe a tout moment
les scripts du "head" (la branche du "body" n'existe pas encore),
puis du "body", (que les objet DOM qui se situent au dessus du script existe),
et du "onload" (là tous l'arbre DOM existe).

Ce source vous montrera comment l'arbre se construit, au différente étape.

Si du source est exécuté dans le "body" ou dans le "head", cela peur ralentie le chargement de l'arbre DOM.
Tant qu'une étape n'est pas terminée, la suivante ne se fait pas, à l'exception du JavaScript lancer par "windows.setTimeout" ou de "windows.setInterval".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
    <head>
        <script language="JavaScript">
            alert("in head:\n"+document.getElementsByTagName('head')[0].parentNode.innerHTML);
        </script>
    </head>
    <body onload='alert("in onload:\n"+document.getElementsByTagName("head")[0].parentNode.innerHTML);'>
        <div style="background:#00ff00;top:0px;left:0px;width:10px;height:10px;"></div>
        <script language="JavaScript">
            alert("in body:\n"+document.getElementsByTagName('head')[0].parentNode.innerHTML);
        </script>
        <div style="background:#ff0000;top:10px;left:10px;width:10px;height:10px;"></div>
    </body>
</html>

--
http://vgt.fr

offsetLeft et arbre DOM

JavaScript

Discussions similaires

Partager

Partager