web-dev-qa-db-fra.com

Comment exécuter du code avant window.load et après que DOM ait été chargé?

Ok alors voici la circonstance: J'ai 2 pages: 

  • 1 x page HTML
  • 1 x javascript externe

Maintenant, dans la page html, il y aura un codage javascript interne pour permettre le placement de 'window.onload', ainsi que d'autres méthodes/fonctions spécifiques à la page.

Mais, dans le javascript externe, je veux que certaines choses soient faites avant que l'événement 'window.onload' ne soit déclenché. Ceci permet aux composants personnalisés d’être initialisés en premier.

Existe-t-il un moyen d’assurer l’initialisation dans le javascript externe avant le déclenchement de l’événement 'window.onload'?

La raison pour laquelle j'ai posé cette question est de tenter de créer un code réutilisable (construit une fois - utilisé de manière généralisée), pour lequel le script externe doit vérifier qu'il est en 'ordre/vérifier' avant le javascript dans le code HTML principal/jsp/asp/php page prend le relais. Et aussi je ne cherche pas de solution dans JQuery @ _ @

Voici quelques liens sur stackoverflow.com que j'ai consultés pour trouver une solution:
- Javascript - Comment détecter si un document est chargé (IE 7/Firefox 3)
- Comment vérifier si la page est COMPLÈTEMENT chargée (scripts et tous)?
- Execute Javascript lorsque la page est entièrement chargée

Quelqu'un peut m'aider ou me diriger vers une solution, votre aide sera appréciée beaucoup plus grande, s'il vous plaît - merci: D

Cordialement, Craig

[réponse mise à jour - 19 novembre 2012]

Bonjour à tous, merci pour vos conseils et solutions suggérées, elles ont toutes été utiles dans la recherche et la mise à l’essai d’une solution viable . Bien que j’ai le sentiment que je ne suis pas complètement satisfait de mes propres résultats, je connais vos conseils et votre aide. m'a rapproché d'une solution et peut en effet aider d'autres personnes dans une situation similaire.

Voici ce que je suis venu avec:

test_page.html

<html>
<head>
<title></title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="test_script_1.js"></script>
<script type="text/javascript" src="test_script_2.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("div_1").innerHTML = "window.onload complete!";
}
</script>

<style type="text/css">
div {
    border:thin solid #000000;
    width:500px;
}
</head>
<body>
    <div id="div_1"></div>

    <br/><br/>

    <div id="div_2"></div>

    <br/><br/>

    <div id="div_3"></div>
</body>
</html>

loader.js

var Loader = {
    methods_arr : [],

    init_Loader : new function() {
        document.onreadystatechange = function(e) {
            if (document.readyState == "complete") {
                for (var i = 0; i < Loader.methods_arr.length; i++) {
                    Loader.method_arr[i]();
                }
            }
        }
    },

    load : function(method) {
        Loader.methods_arr.Push(method);
    }
}

test_script_1.js

Loader.load(function(){initTestScript1();});

function initTestScript1() {
    document.getElementById("div_1").innerHTML = "Test Script 1 Initialized!";
}

test_script_2.js

Loader.load(function(){initTestScript2();});

function initTestScript2() {
    document.getElementById("div_2").innerHTML = "Test Script 2 Initialized!";
}

Cela garantira que les scripts sont appelés avant l'appel du gestionnaire d'événements window.onload, mais également que le document est rendu en premier.

Que pensez-vous de cette solution possible?

En vous remerciant tous encore pour l'aide et l'aide: D

javascriptjavascript-events
19
EthiopionZA

En gros, vous recherchez ceci:

document.onreadystatechange = function(e)
{
    if (document.readyState === 'complete')
    {
        //dom is ready, window.onload fires later
    }
};
window.onload = function(e)
{
    //document.readyState will be complete, it's one of the requirements for the window.onload event to be fired
    //do stuff for when everything is loaded
};

voir MDN pour plus de détails.

N'oubliez pas que le DOM peut être chargé ici, mais cela ne signifie pas que le fichier js externe a été chargé. Par conséquent, vous pourriez ne pas avoir accès à toutes les fonctions/objets définis dans ce script. Si vous voulez vérifier cela, vous devrez utiliser window.onload pour vous assurer que toutes les ressources externes ont été chargées.

Donc, en gros, dans votre script externe, vous aurez besoin de 2 gestionnaires d’événements: un pour le readystatechange, qui fait ce que vous devez faire sur DOMready, et un window.onload, qui, par définition, être renvoyé après le document est prêt. (ceci vérifie si la page est complètement chargée).
Juste pour que vous sachiez, dans IE <9 window.onload provoque une fuite de mémoire (car le DOM et le moteur JScript sont deux entités distinctes, l’objet window n’est jamais complètement déchargé et l'auditeur n'est pas GCé). Il y a un moyen de résoudre ce problème, que j'ai posté ici , c'est assez bavard, cependant, mais juste pour que vous sachiez ...

15
Elias Van Ootegem

Si vous souhaitez que quelque chose soit fait immédiatement sans attendre aucun événement, vous pouvez simplement le faire en JavaScript - vous n'avez rien à faire pour que votre code soit exécuté immédiatement, mais ne faites rien qui rendrait votre code attendre. C'est donc plus facile que d'attendre des événements.

Par exemple si vous avez ce code HTML:

<div id=one></div>
<script src="your-script.js"></script>
<div id=two></div>

alors quel que soit le code contenu dans votre script, js sera exécuté après le div avec id = un mais avant que le div avec id = deux soit analysé. Il suffit de ne pas enregistrer de rappels d’événements, mais de faire ce que vous avez immédiatement besoin dans votre JavaScript.

4
rsp

javascript s'exécute de haut en bas. cela signifie que si vous incluez votre javascript externe avant votre javascript interne, il sera simplement exécuté avant que le javascript interne ne soit exécuté.

3
GottZ

Vous pouvez utiliser l'événement DOMContentLoaded:

addEventListener("DOMContentLoaded", function() {
    //Your code goes here
});

L'astuce consiste à appeler addEventListener sur un objet window (qui n'est pas spécifié car dans JavaScript, c'est la portée globale d'un script). En fait, la classe Window a l'événement DOMContentLoaded qui est déclenché juste après le chargement de la DOM.

0
Davide Cannizzo