J'utilise le code suivant pour exécuter certaines instructions après le chargement de la page.

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

Mais ce code ne fonctionne pas correctement. La fonction est appelée même si certaines images ou éléments sont en cours de chargement. Ce que je veux, c'est appeler la fonction lorsque la page est complètement chargée.

cela peut fonctionner pour vous:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

ou si votre confort avec jquery,

$(document).ready(function(){
// your code
});

$(document).ready()se déclenche sur DOMContentLoaded, mais cet événement n'est pas déclenché de manière cohérente entre les navigateurs. C'est pourquoi jQuery implémentera très probablement des solutions de contournement lourdes pour prendre en charge tous les navigateurs. Et cela rendra très difficile de simuler "exactement" le comportement en utilisant du Javascript brut (mais pas impossible bien sûr).

comme Jeffrey Sweeney et J Torres l'ont suggéré, je pense qu'il vaut mieux avoir une setTimeoutfonction, avant de déclencher la fonction comme ci-dessous:

setTimeout(function(){
 //your code here
}, 3000);

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

idem pour jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

REMARQUE: - N'utilisez pas le balisage ci-dessous (car il écrase d'autres déclarations de même type):

document.onreadystatechange = ...

Si vous pouvez utiliser jQuery, regardez load . Vous pouvez ensuite configurer votre fonction pour qu'elle s'exécute une fois le chargement de votre élément terminé.

Par exemple, considérons une page avec une image simple:

<img src="book.png" alt="Book" id="book" />

Le gestionnaire d'événements peut être lié à l'image:

$('#book').load(function() {
  // Handler for .load() called.
});

Si vous avez besoin de tous les éléments de la fenêtre actuelle à charger, vous pouvez utiliser

$(window).load(function () {
  // run code
});

Je ne comprends pas très bien ce que vous entendez par chargement de page terminé, "chargement DOM" ou "chargement de contenu" également? Dans une page HTML, le chargement peut déclencher un événement après deux événements de type.

1. Chargement DOM: ce qui garantit que tout l'arborescence DOM est chargée du début à la fin. Mais ne vous assurez pas de charger le contenu de référence. Supposons que vous ayez ajouté des images par les imgbalises, donc cet événement garantit que toutes imgles images chargées mais pas les images correctement chargées ou non. Pour obtenir cet événement, vous devez écrire de la manière suivante:

   document.addEventListener('DOMContentLoaded', function() {
      // your code here
   }, false);

   Ou en utilisant jQuery:

   $(document).ready(function(){
   // your code
   });

2. Après le chargement du DOM et du contenu: qui indiquent également le chargement du DOM et du contenu. Cela garantira non seulement la imgbalise, mais également toutes les images ou tout autre contenu relatif chargé. Pour obtenir cet événement, vous devez écrire de la manière suivante:

   window.addEventListener('load', function() {...})

   Ou en utilisant jQuery:

   $(window).on('load', function() {
    console.log('All assets are loaded')
   })

Si vous voulez appeler une fonction js dans votre page html, utilisez l'événement onload. L'événement onload se produit lorsque l'agent utilisateur termine le chargement d'une fenêtre ou de tous les cadres d'un FRAMESET. Cet attribut peut être utilisé avec les éléments BODY et FRAMESET.

<body onload="callFunction();">
....
</body>

De cette façon, vous pouvez gérer les deux cas - si la page est déjà chargée ou non:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

Vous pouvez également essayer ci-dessous.

$(window).bind("load", function() { 
// code here });

Cela fonctionne dans tous les cas. Cela ne se déclenchera que lorsque la page entière sera chargée.

Pour autant que je sache, il vaut mieux utiliser

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

La réponse n ° 1 de l'utilisation de l' DOMContentLoadedévénement est un pas en arrière puisque le DOM se chargera avant que tous les actifs ne soient chargés.

D'autres réponses recommandent setTimeoutque je m'opposerais fortement car elles sont complètement subjectives aux performances de l'appareil du client et à la vitesse de connexion réseau. Si quelqu'un est sur un réseau lent et / ou a un processeur lent, une page peut prendre plusieurs à des dizaines de secondes pour se charger, vous ne pouvez donc pas prédire combien de temps setTimeoutil faudra.

Quant à readystatechange, il se déclenche chaque fois que des readyStatechangements qui selon MDN seront encore avant l' loadévénement.

Achevée

L'état indique que l'événement de chargement est sur le point de se déclencher.

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

Si vous n'utilisez aucun framework JS, ce projet est le meilleur moyen d'obtenir l'état prêt pour dom, avec une compatibilité entre navigateurs

https://github.com/ded/domready/blob/master/ready.js

Si vous utilisez déjà jQuery, vous pouvez essayer ceci:

$(window).bind("load", function() {
   // code here
});

Je peux vous dire que la meilleure réponse que j'ai trouvée est de mettre un script "pilote" juste après la </body>commande. C'est la solution la plus simple et probablement la plus universelle que certaines des solutions ci-dessus.

Le plan: Sur ma page se trouve un tableau. J'écris la page avec le tableau dans le navigateur, puis je la trie avec JS. L'utilisateur peut le récupérer en cliquant sur les en-têtes de colonne.

Une fois la table terminée par une </tbody>commande et le corps terminé, j'utilise la ligne suivante pour appeler le JS de tri pour trier la table par colonne 3. J'ai récupéré le script de tri sur le Web afin qu'il ne soit pas reproduit ici. Pendant au moins l'année prochaine, vous pouvez le voir en fonctionnement, y compris le JS, à static29.ILikeTheInternet.com. Cliquez "ici" en bas de page. Cela fera apparaître une autre page avec le tableau et les scripts. Vous pouvez le voir mettre en place les données puis les trier rapidement. J'ai besoin d'accélérer un peu mais les bases sont là maintenant.

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

CréateurMikey

Essayez ce jQuery :

$(function() {
 // Handler for .ready() called.
});

appeler une fonction après le chargement complet de la page.

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

J'ai tendance à utiliser le modèle suivant pour vérifier le chargement du document. La fonction renvoie une promesse (si vous devez prendre en charge IE, incluez le polyfill ) qui se résout une fois le chargement du document terminé. Il utilise en setIntervaldessous car une implémentation similaire avec setTimeoutpourrait entraîner une pile très profonde.

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Bien sûr, si vous ne devez pas prendre en charge IE:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Avec cette fonction, vous pouvez effectuer les opérations suivantes:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

J'utilise des composants Web, donc cela fonctionne pour moi:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

Mettez votre script après la fin de la balise body ... ça marche ...