Snippet JS : whenDomIsReady
Posé ici le vendredi 06 février 2009 à 11:10 par
J'inaugure rapide une nouvelle section sur ce blog. J'y posterai régulièrement des petits bouts de code Javascript, Css ou Php. Ces petits bouts de code, de mon cru ou glanés sur le net, ne demandent pas de longs articles mais méritent pourtant d'être partagés.
J'ouvre le bal avec un snippet Javascript permettant de détecter la fin du chargement du DOM avant de lancer un script. Pourquoi un tel script alors que window.onload existe ? Tout simplement par ce que window.onload attendra que tous les éléments de la page, scripts et images inclus, soit chargés pour lancer le script alors que celui-ci le déclenchera généralement bien plus tôt.
Snippet
/**
* whenDOMisReady
* par Jay Salvat - http://blog.jaysalvat.com/
*/
function whenDOMisReady(callback) {
if ( document.getElementsByTagName
&& document.getElementById
&& document.body ) {
return callback();
}
setTimeout(function() { whenDOMisReady(callback) }, 10);
}
Cette méthode est certainement bien moins performante que le $(document).ready() de jQuery mais peut tirer d'affaires dans un petit projet sans librairie Javascript.
Usage
<html>
<head>
<title>whenDomIsReady</title>
<script type="text/javascript" src="whenDOMisReady.js"></script>
<script type="text/javascript">
whenDOMisReady(function() {
document.getElementById('ici').style.background = 'red';
});
</script>
</head>
<body>
<p id="ici">Ce paragraphe sera bordé de rouge</p>
</body>
</html>
Ce contenu est mis à disposition selon les termes de la licence Creative Commons 2.0 France : Paternité, Pas d'Utilisation Commerciale, Partage des Conditions Initiales à l'Identique.
Context
Thématiques :
Trackbacks
0 trackback
Commentaires
0 commentaire