Comment exécuter une fonction lorsque la page est complètement chargée?
J'ai besoin d'exécuter du code JavaScript lorsque la page est complètement chargée. Cela inclut des choses comme des images.
Je sais que vous pouvez vérifier si le DOM est prêt, mais je ne sais pas si c'est le même que lorsque la page est complètement chargée.
11 réponses
C'est appelé onload. Il est venu waaaay avant que DOM ready ne soit là, et DOM ready a été créé pour la raison exacte que onload a attendu sur les images.
window.onload = function () { alert("It's loaded!") }
Habituellement, vous pouvez utiliser window.onload, mais vous remarquerez peut-être que les navigateurs récents ne déclenchent pas window.onload lorsque vous utilisez les boutons historique précédent/suivant.
Certaines personnessuggèrent des contorsions étranges pour contourner ce problème, mais vraiment si vous faites juste un gestionnaire window.onunload (même celui qui ne fait rien), ce comportement de mise en cache sera désactivé dansTous les navigateurs . Le MDC documente assez bien cette "fonctionnalité" , mais pour une raison quelconque, il y a encore des gens qui utilisent setInterval et d'autres hacks bizarres.
Certaines versions D'Opera ont un bug qui peut être contourné en ajoutant ce qui suit quelque part dans votre page:
<script>history.navigationMode = 'compatible';</script>
Si vous essayez simplement d'obtenir une fonction javascript appelée une fois par vue (et pas nécessairement après le chargement du DOM), vous pouvez faire quelque chose comme ceci:
<img src="javascript:location.href='javascript:yourFunction();';">
Par exemple, j'utilise cette astuce pour précharger un fichier très volumineux dans le cache sur un écran de chargement:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
Essayez ceci, il ne fonctionne Qu'après que la Page entière a chargé
Par Javascript
window.onload = function(){
// code goes here
};
Par Jquery
$(window).bind("load", function() {
// code goes here
});
La fenêtre.l'événement onload se déclenche lorsque tout est chargé, y compris les images, etc.
Vous souhaitez vérifier L'état Dom ready si vous souhaitez que votre code js s'exécute le plus tôt possible, mais vous devez toujours accéder aux éléments DOM.
Par souci d'exhaustivité, vous pouvez également le lier à DOMContentLoaded, qui est maintenant largement supporté
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
Plus d'informations: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Javascript en utilisant l'événement onLoad(), attendra que la page soit chargée avant de l'exécuter.
<body onload="somecode();" >
Si vous utilisez la fonction document ready du framework jQuery, le code se charge dès que le DOM est chargé et avant que le contenu de la page ne soit chargé:
$(document).ready(function() {
// jQuery code goes here
});
Vous pouvez utiliser fenêtre.onload , car les documents indiquent qu'il n'est pas déclenché tant que le DOM n'est pas prêt et que tous les autres actifs de la page (images, etc.) sont chargés.
Essayez ce code
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}
Visite https://developer.mozilla.org/en-US/docs/DOM/document.readyState pour plus de détails,
Et voici une façon de le faire avec PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});
Si vous avez besoin d'utiliser Beaucoup onload Utilisez $(window).load à la place (jQuery):
$(window).load(function() {
//code
});
La propriété onload du mixin GlobalEventHandlers est un événement gestionnaire pour l'événement de chargement d'une fenêtre , XMLHttpRequest, élément, etc., qui se déclenche lorsque la ressource est chargé.
Donc, fondamentalement, javascript a déjà la méthode onload sur la fenêtre qui est exécutée quelle page entièrement chargée, y compris les images...
Vous pouvez faire quelque chose:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};