web-dev-qa-db-fra.com

exécuter la fonction après le chargement complet de la page

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 certains éléments sont en cours de chargement. Ce que je veux, c'est d'appeler la fonction, la page est chargée complètement.

javascripthtmlimage
76
Neeraj Kumar

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() est déclenché 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 probablement des solutions de contournement lourdes pour prendre en charge tous les navigateurs. Et cela rendra très difficile la simulation "exacte" du comportement en Javascript simple (mais pas impossible bien sûr).

comme Jeffrey Sweeney et J Torres l'ont suggéré, je pense qu'il est préférable d'avoir une fonction setTimeout, avant de lancer la fonction comme ci-dessous:

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

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

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 charger tous les éléments de la fenêtre actuelle, vous pouvez utiliser 

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

A) avec javascript simple :

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

    if (event.target.readyState === "interactive") {      //same as:  document.addEventListener("DOMContentLoaded"...   // same as  jQuery.ready
        alert("All HTML DOM elements are accessible");
    }

    if (event.target.readyState === "complete") {
        alert("Now external resources are loaded too, like css,src etc... ");
    }

});

B) avec jQuery :

$(function(){
    alert("hello");
});

C) N'utilisez pas la méthode ci-dessous (qui utilise le signe =) :

document.onreadystatechange = function(){ alert("Hi"); }

car il écrase une autre déclaration de même nature.

19
T.Todua

Je suis un peu confus que ce que vous entendez par chargement de page terminé, "Charge DOM" ou "Charge de contenu" également? Dans une page HTML, le chargement peut déclencher un événement après deux événements.

  1. Charge DOM: Assure que toute l’arborescence DOM chargée commence à la fin. Mais pas pour assurer le chargement du contenu de référence. Supposons que vous ajoutiez des images avec les balises img. Cet événement garantit donc que tous les img sont chargés, 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: indique le chargement du DOM et du contenu. Cela assurera non seulement la balise img, 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')
})
15
Hanif

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 d'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>
9
user2361682

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();
       };
    };
}
5
tsveti_iko

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

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

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

Le plan: Sur ma page est un tableau. J'écris la page avec la table dans le navigateur, puis la trie avec JS. L'utilisateur peut y recourir en cliquant sur les en-têtes de colonne.

Une fois la table terminée, une commande </tbody> et le corps sont terminés. J'utilise la ligne suivante pour appeler le tri JS afin de trier la table par la colonne 3. J'ai récupéré le script de tri sur le Web. Pendant au moins l’année suivante, vous pouvez voir cela en fonctionnement, y compris le JS, à static29.ILikeTheInternet.com. Cliquez "ici" au bas de la page. Cela fera apparaître une autre page avec la table et les scripts. Vous pouvez le voir mettre les données en place, puis le 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>

MakerMikey

1
Micheal Morrow

Si vous n'utilisez aucun framework JS, ce projet est le meilleur moyen d'obtenir l'état de disponibilité dom, avec une compatibilité entre navigateurs.

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

1
Olivier Refalo

appelle 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);

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

Essayez ceci jQuery :

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

Sinon, vous pouvez essayer ci-dessous.

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

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

0
Ganesh Ram Ravi