11548 sujets

JavaScript, DOM et API Web HTML5

[DOM] Intercepter la création d'un élément

Salut,

Je désire ajouter dynamiquement une boite de message en haut de page.
loadBox=appendLoadBox();

Une fois le document chargé ainsi que ses ressources, la boite est supprimée.
if(loadBox)window.onload=removeLoadBox;

Ne désirant pas de code Javascript dans body, si j'appelle directement appendLoadBox() dans <head>, la ligne
document.body.appendChild(box);

provoque tout naturellement une erreur car body n'existe pas encore.

La solution permettant d'ouvrir la boite de message le plus tôt possible (avant que les ressources soient chargées) est d'appeler une fonction, en l'occurence bodyReady(), à intervalle régulier tant que la balise body n'est pas ajoutée dans l'arbre DOM.

Une fois la création de body interceptée par la fonction bodyReady() :

- La fonction appendLoadBox() peut être executée sans souci.
- La fermeture de la boite peut-etre programmée ( window.onload=removeLoadBox; )

Le code complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<title>Boite de message</title>
		<meta name="description" content="Attendre le chargement complet du document" />

		<style type="text/css" media="screen"><!--
			#loading {
				margin:0px;padding:0px;
				position:absolute;left:8px;top:8px;
				width:224px;
				display:none;
				color:#000;background-color:#eee;
				border:4px #ccc solid;
				font-size:18px;
				overflow:auto;
				z-index:10
			}
			#loading p {margin:0px;padding:8px}
		-->
		</style>

		<script type="text/javascript"><!--

			// Retourne un objet HTML à partir de son id.
			function getId(id){
				var s=(typeof id==='string')?id:'';
				if(s!==''){
					if(document.getElementById)
						return document.getElementById(s);
					else if(document.all)
						return document.all[s];
					else if(document.layers)
						return document.layers[s];
				}
				return null;
			}

			var loadBox; // Variable globale

			// Ajoute la boite de message dans le document
			function appendLoadBox(){
				var box=document.createElement('div');
				if(box){
					box.id='loading';
					box.innerHTML='<p><strong>Chargement en cours...<\/strong><br \/><em>Merci de patienter<\/em>...<\/p>';
					box.style.display='block';
					document.body.appendChild(box);
				}
				return (box)?box:false;
			}

			// Supprime la boite de message du document
			function removeLoadBox(){
				if(loadBox){
					loadBox.style.display='none';
					while(loadBox.hasChildNodes())loadBox.removeChild(loadBox.lastChild);
					loadBox.parentNode.removeChild(loadBox);
					loadBox=null;
				}
			}

			// On vérifie la présence de la balise body à intervalle régulier pour y ajouter la boite de message
			function bodyReady(){
				this.n=(typeof this.n=='undefined')?0:this.n+1;
				if(typeof document.getElementsByTagName!=='undefined' && (document.getElementsByTagName('body')[0]!=null || document.body!=null)){
					loadBox=appendLoadBox();
					if(loadBox)window.onload=removeLoadBox;
				}
				else if(this.n<80)
					setTimeout('bodyReady()',125);
			}
			bodyReady();
		//-->
		</script>
	</head>

	<body>
		<div id="gallery">
			<!--
				Ici, des images...
			-->
		</div>
	</body>
</html>

Cette méthode fonctionne mais bon...

Nous savons que l'évenement window.onload est exécuté une fois la page chargée ainsi que toutes ses ressources.

Existe t-il un méthode nous permettant d'intercepter :

- la création d'un élément dans l'arbre DOM
ou
- la fin du chargement de la page HTML (sans les ressources)

à l'aide du gestionnaire d'évenements Javascript ?
Modifié par Eric2A (18 Aug 2010 - 21:22)
Hello,

Dans ton cas, il serait plus simple de placer l'élément script au début de l'élément body.

Je suis assez sceptique par rapport au but de ton script. Informer que la page est en cours de chargement est du ressort de l'agent utilisateur et non de l'auteur (à part quand AJAX est impliqué, ce qui ne semble pas être ton cas).

Il n'existe actuellement pas d'événement lié aux modifications de l'arbre DOM (c'était prévu par DOM 3 events, mais a été abandonné à cause de problèmes d'implémentation).

Quant à l'événement de chargement de l'arbre DOM, il existe (DOMContentLoaded) mais n'est pas encore standardisé et n'est pas supporté parfaitement. Toutes les bibliothèques JS permettent de l'émuler (voir par exemple jQuery).

P.S. : ta fonction getId est inutile. Seuls des navigateurs antédiluviens ne supportent pas document.getElementById.
Merci Julien pour cette réponse bien riche en infos.
Julien Royer a écrit :
Il n'existe actuellement pas d'événement lié aux modifications de l'arbre DOM

C'est bien dommage.
Julien Royer a écrit :
il serait plus simple de placer l'élément script au début de l'élément body [...] Informer que la page est en cours de chargement est du ressort de l'agent utilisateur

Tu m'as convaincu.
Je placerais l'appel à la fonction créant l'élément au début de body.
Sujet clos
Aller à