web-dev-qa-db-fra.com

comment savoir si l'événement "load" de la fenêtre a déjà été déclenché

J'écris un script Javascript . Ce script sera probablement chargé de manière asynchrone (format AMD).

Dans ce script, je n’aimerais rien faire d’important jusqu’à ce que l’événement window.load soit déclenché . J’écoute donc l’événement "load" de la fenêtre.

Mais si le script est chargé après l'événement window.load ... comment puis-je savoir que window.load a déjà été déclenché?

Et bien sûr, je ne veux pas ajouter quelque chose dans d’autres scripts (ils sont tous chargés async, le problème est le même) :)

Modifier :

Imaginez un document HTML sans Javascript.

Que quelqu'un insère dans cette doc une balise, et cette balise de script charge mon fichier Javascript.

Cela va exécuter mon script.

Comment ce script peut savoir si window.load a déjà été déclenché?

Pas de jQuery, pas de script dans la doc HTML avant le mien.

Est-ce possible de savoir ??

J'ai trouvé la propriété window.document.readystate. Cette propriété concerne l’événement "ready" du document que j’ai reçu, pas pour la fenêtre "load" . Y at-il quelque chose de similaire pour l’événement window "load"?

javascriptjavascript-eventsasynchronous
33
Nicolas

La solution la plus simple peut-être de rechercher document.readyState == 'complete', voir http://www.w3schools.com/jsref/prop_doc_readystate.asp

43
Matthias Samsel

Réponse rapide

Pour répondre rapidement au titre de la question:

document.readyState === 'complete'

Exemple plus profond

Vous trouverez ci-dessous un assistant Nice si vous souhaitez appeler du code lors du chargement d’une fenêtre, tout en maintenant le cas où la fenêtre aurait déjà été chargée au moment de l’exécution du code.

function winLoad(callback) {
  if (document.readyState === 'complete') {
    callback();
  } else {
    window.addEventListener("load", callback);
  }
}

winLoad(function() {
  console.log('Window is loaded');
});

Note: les extraits de code ne sont pas exécutés dans le même contexte de fenêtre, donc document.readyState === 'complete' est évalué à false lorsque vous l'exécutez. Si vous mettez la même chose dans votre console maintenant pour cette fenêtre, elle devrait être considérée comme vraie.

Voir aussi: Quel est l'équivalent non-jQuery de '$ (document) .ready ()'?

2
CTS_AE

Voici ma réponse:

violon

window.addEventListener("load", function () {
    window.loaded = true;
});

function logLoaded() {
    console.log("loaded");
}

(function listen () {
    if (window.loaded) {
        logLoaded();
    } else {
        console.log("notLoaded");
        window.setTimeout(listen, 50);
    }
})();

Vous pouvez en savoir plus sur addEventListener () et sa compatibilité (la nouveauté de la spécification ECMAScript 5) here . C'est la nouvelle façon "préférée" de faire avancer les choses.

Vous pouvez en savoir plus sur les expressions IIFE (Immediately Invoked Function Expressions) (alternativement fonctions anonymes auto-invoquées ou fonctions anonymes immédiatement invoquées) ici .

EDIT: Voici une bonne réponse déjà sur StackOverflow:

Comment vérifier si DOM est prêt sans framework?

Si vous voulez spécifiquement savoir si l'événement de chargement DOM s'est déclenché, définissez une variable globale dans un gestionnaire d'événements 'load' du DOM, puis vérifiez son existence lors du chargement de votre nouveau code.

// in 'load' event handler
window.domLoadEventFired = true;

// in code you are loading asynchronously
if (typeof window.domLoadEventFired !== undefined) {
    // ...
}
1
Aeoril

Navigateur performances de navigation La métrique loadEventEnd peut être utilisée pour déterminer si un événement de chargement a été déclenché:

let navData = window.performance.getEntriesByType("navigation");
if (navData.length > 0 && navData[0].loadEventEnd > 0)
{
    console.log('Document is loaded');
} else {
    console.log('Document is not loaded');
}
1
Evgeny

Si vous ne voulez pas utiliser jQuery, la logique utilisée est la suivante:

if( !document.body )
    setTimeout( checkAgain, 1 );

Donc, entre l'événement chargé dans Windows et la vérification de la disponibilité de la propriété body du document, vous pouvez vérifier si le DOM est prêt.

0
Matt R. Wilson