2009-02-24 5 views
7

Quelqu'un peut-il me diriger dans la direction de l'événement DOM chargé?Comment connecter l'événement DOM chargé?

Fondamentalement, je veux montrer un chargeur pendant que le dom charge (je ne veux pas dire des demandes d'Ajax - la première fois qu'un utilisateur frappe une page)?

Merci à tous à l'avance

Répondre

10

Toutes les bibliothèques populaires Javascript ont un événement « DOM chargé » vous pouvez utiliser pour cela.

essentiellement:

<html> 
<head> 
    <script> 
    // if using jQuery 
    $(document).ready(function() { $('#loading').hide(); }); 
    // if using Prototype 
    document.observe("dom:loaded", function() { $('loading').hide(); }); 
    </script> 
</head> 
<body> 
    <div id="loading">Loading...</div> 
    <!-- rest of page --> 
</body> 
</html> 
0

Juste pour fournir une alternative à jQuery, YUI événement fournit une fonction onDomReady() à cette fin ainsi. Voici l'exemple de leur site:

<script type="text/javascript"> 

function init() { 
    YAHOO.util.Dom.setStyle("hidden_element", "visibility", ""); 
} 
YAHOO.util.Event.onDOMReady(init); 

</script> 
0

La bonne façon de le faire sans une bibliothèque (et vraiment, même avec une bibliothèque, puisque vous avez affaire à blocage de script et de l'imprévisibilité IE) est de mettre un script à la fin de la page:

onLoaded = function() {...}

onLoaded()

28

Si vous n'êtes pas à l'aide d'un cadre, utilisez le DOMCon Evénement tentLoaded:

document.addEventListener('DOMContentLoaded', function() { 
    // ... 
}) 
+1

Super! Mozilla a un bon document sur ceci: https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded – philo