L'équivalent en JavaScript pur de la fonction $.ready() de jQuery - comment appeler une fonction lorsque la page/le DOM est prêt(e) à l'accueillir.

Question

L'équivalent en JavaScript pur de la fonction $.ready() de jQuery - comment appeler une fonction lorsque la page/le DOM est prêt(e) à l'accueillir.

Demandé el 27 de Mars, 2012: Quand la question a-t-elle été
75611 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

équivalent de $(document).ready sans jQuery (5 réponses )

Avec jQuery, nous connaissons tous la merveilleuse .ready() fonction :

$('document').ready(function(){});

Toutefois, disons que je veux exécuter une fonction écrite en JavaScript standard, sans bibliothèque de soutien, et que je veux lancer une fonction dès que la page est prête à la gérer. Quelle est la bonne façon d'aborder cette question ?

Je sais que je peux le faire :

window.onload="myFunction()";

Ou je peux utiliser le body étiquette :

<body onload="myFunction()">

Ou bien je peux même essayer en bas de la page après tout, mais la fin body o html tag comme :

<script type="text/javascript">
    myFunction();
</script>

Quelle est la méthode, compatible avec les navigateurs (anciens et nouveaux), qui permet d'envoyer une ou plusieurs fonctions à la manière de la fonction jQuery ? $.ready() ?

Demandé el 27 de Mars, 2012 par chris

1 votes

La prise en charge des anciens navigateurs est une bonne chose, mais étant donné la vitesse à laquelle la technologie progresse et le fait que les gens semblent rattraper leur retard plus rapidement de nos jours, elle n'est pas nécessaire à 100 %, mais c'est un bon bonus si possible. Dans l'ensemble, j'essaie de comprendre si l'un de ces éléments est la norme dans les navigateurs. Est-ce qu'ils fonctionnent tous ? Le choix du navigateur est-il important ? S'ils fonctionnent tous, quel serait le meilleur choix par rapport aux autres ?

Commenté el 28 de Mars, 2012 par chris

11 votes

Voir ça : stackoverflow.com/questions/799981/

Commenté el 28 de Mars, 2012 par Dan A.

0 votes

@clexmond mettre script en bas vs en haut est quelque chose que j'ai toujours compris pour diverses raisons. J'ai tendance à le placer en bas, dans des fichiers externes ou sur la page elle-même. Mais ces deux dernières années, j'ai été gâté par jQuery et d'autres libraires. Cependant, je suis maintenant dans une sorte de croisade pour essayer de mieux comprendre le javascript par lui-même, sans libraire. Donc, malgré ce que je sais de javascript, cette simple petite chose me déstabilise un peu car je veux m'assurer que tout script que je fais suit une méthodologie compatible avec tous les navigateurs.

Commenté el 28 de Mars, 2012 par chris

Afficher 6 autres commentaires

Answer 1

5 Réponses

Answer 2

23voto

Zak The Hat Points 31

Je ne suis pas tout à fait sûr de ce que vous demandez, mais peut-être que ceci peut aider :

window.onload = function(){
    // Code. . .

}

Ou :

window.onload = main;

function main(){
    // Code. . .

}

Répondu el 19 de Juin, 2016 par Zak The Hat (31 Points )

Answer 3

12voto

Kernel James Points 1676

Votre méthode (placer script avant la balise fermante du corps)

<script>
   myFunction()
</script>
</body>
</html>

est un moyen fiable de prendre en charge les anciens et les nouveaux navigateurs.

Répondu el 28 de Mars, 2012 par Kernel James (1676 Points )

1 votes

J'ai dit que c'était "la seule façon fiable", pas "la seule façon". J'ai dit "seul moyen fiable" parce que c'était le seul moyen de le faire dans Netscape 2.0.

Commenté el 9 de Décembre, 2016 par Kernel James

3 votes

Selon l'historique de vos révisions, vous avez en fait dit "est le seulement (un des) moyen(s) fiable(s) de prendre en charge les anciens et les nouveaux navigateurs". Un tel langage est facilement mal interprété et peut être interprété comme le seul moyen. Je ne retire pas ce que j'ai dit, désolé.

Commenté el 20 de Décembre, 2016 par defaye

Answer 4

7voto

Vitim.us Points 3340

Prêt

function ready(fn){var d=document;(d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();}

Utilisez comme

ready(function(){
    //some code
});

Pour le code auto-invoquant

(function(fn){var d=document;(d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();})(function(){

    //Some Code here
    //DOM is avaliable
    //var h1s = document.querySelector("h1");

});

Soutien : IE9+

Répondu el 24 de Novembre, 2015 par Vitim.us (3340 Points )

Answer 5

5voto

rogerdpack Points 12806

Voici une version nettoyée, n'utilisant pas l'évaluation, de Ram-swaroop's variété "fonctionne dans tous les navigateurs" - fonctionne dans tous les navigateurs !

function onReady(yourMethod) {
  var readyStateCheckInterval = setInterval(function() {
    if (document && document.readyState === 'complete') { // Or 'interactive'
      clearInterval(readyStateCheckInterval);
      yourMethod();
    }
  }, 10);
}
// use like
onReady(function() { alert('hello'); } );

Cependant, elle attend 10 ms de plus pour s'exécuter. Voici donc une méthode plus compliquée qui ne devrait pas l'être :

function onReady(yourMethod) {
  if (document.readyState === 'complete') { // Or also compare to 'interactive'
    setTimeout(yourMethod, 1); // Schedule to run immediately
  }
  else {
    readyStateCheckInterval = setInterval(function() {
      if (document.readyState === 'complete') { // Or also compare to 'interactive'
        clearInterval(readyStateCheckInterval);
        yourMethod();
      }
    }, 10);
  }
}

// Use like
onReady(function() { alert('hello'); } );

// Or
onReady(functionName);

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

Répondu el 28 de Octobre, 2016 par rogerdpack (12806 Points )

Answer 6

3voto

maxhud Points 3034

document.ondomcontentready=function(){} devrait faire l'affaire, mais il n'est pas entièrement compatible avec les navigateurs.

Il semble que vous devriez simplement utiliser jQuery min.

Répondu el 28 de Mars, 2012 par maxhud (3034 Points )

0 votes

Oh, je ne pourrais pas être plus d'accord avec vous. Je suis un grand fan de jQuery et je l'utilise dans presque tout ce que je fais en rapport avec le javascript. Cependant, j'essaie juste d'apprendre JavaScript à partir du noyau afin que je puisse être encore meilleur avec les applications que je développe, y compris ce que je ferais avec jQuery à l'appui.

Commenté el 28 de Mars, 2012 par chris

0 votes

Vous pouvez l'utiliser ou utiliser window.onload, mais il n'y a pas de bonne solution pour tous les navigateurs. Voici une lecture sur la façon dont jQuery le fait si vous êtes intéressé : docs.jquery.com/

Commenté el 28 de Mars, 2012 par maxhud

0 votes

Il semble que vous puissiez le faire fonctionner en théorie en ajoutant des événements onload aux images et à la fenêtre, ce qui devrait inclure chaque élément.

Commenté el 28 de Mars, 2012 par maxhud

Afficher 2 autres commentaires

L'équivalent en JavaScript pur de la fonction $.ready() de jQuery - comment appeler une fonction lorsque la page/le DOM est prêt(e) à l'accueillir.

Réponses

Prêt

Pour le code auto-invoquant

Questions en vedette

Top Tags

Prograide.com

Powered by:

L'équivalent en JavaScript pur de la fonction $.ready() de jQuery - comment appeler une fonction lorsque la page/le DOM est prêt(e) à l'accueillir.

Réponses

Prêt

Pour le code auto-invoquant

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: