J'ai besoin d'exécuter du code JavaScript lorsque la page est complètement chargée. Cela inclut des choses comme les images.
Je sais que vous pouvez vérifier si le DOM est prêt, mais je ne sais pas si c'est la même chose que lorsque la page est entièrement chargée.
Réponses:
Ça s'appelle load. Il est venu waaaaay avant que DOM ready ne soit disponible, et DOM ready a été créé pour la raison exacte qui loadattendait les images.
window.addEventListener('load', function () {
alert("It's loaded!")
})
window.onloadest appelé quand chaque composant de page / ressource (c'est-à-dire * y compris * les images). Ai-je raison?
onloadattend toutes les ressources qui font partie du document. Cela exclut, bien sûr, les requêtes créées dynamiquement qui ne font pas partie du document lui-même, par exemple, une requête AJAX.
addEventListener("load", function(){… })au lieu d'écraser la onloadpropriété.
Habituellement, vous pouvez utiliser window.onload, mais vous remarquerez peut-être que les navigateurs récents ne se déclenchent pas window.onloadlorsque vous utilisez les boutons d'historique arrière / avant.
Certaines personnes suggèrent des contorsions étranges pour contourner ce problème, mais vraiment si vous créez un window.onunloadgestionnaire (même un qui ne fait rien), ce comportement de mise en cache sera désactivé dans tous les navigateurs. Le MDC documente assez bien cette "fonctionnalité", mais pour une raison quelconque, il y a encore des gens qui utilisent setIntervalet d'autres hacks étranges.
Certaines versions d'Opera ont un bogue 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 très gros fichier dans le cache sur un écran de chargement:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
Par souci d'exhaustivité, vous pouvez également vouloir le lier à DOMContentLoaded, qui est désormais largement pris en charge
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
Plus d'informations: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
$.readyj'ai pensé que cela apportait une bonne contribution. Btw. J'utiliserais la addEventListenerméthode -m également pour l' loadévénement, car elle vous permet d'avoir plusieurs rappels:window.addEventListener("load", function(event){ // your code here });
Essayez-le, il s'exécute uniquement après le chargement de la page entière
Par Javascript
window.onload = function(){
// code goes here
};Par Jquery
$(window).bind("load", function() {
// code goes here
});$(window)me fait penser que ce serait jquery - non? Ou est-ce que la syntaxe javascript est confuse? (Je suis nouveau sur JS).
$(document).ready();lorsque jQuery est disponible?
Essayez ce code
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}visitez https://developer.mozilla.org/en-US/docs/DOM/document.readyState pour plus de détails
"interactive"n'est pas complètement chargé. "complete"est entièrement chargé
Javascript en utilisant l' onLoad()événement, attendra que la page soit chargée avant de s'exécuter.
<body onload="somecode();" >Si vous utilisez la fonction prête pour le document du framework jQuery, le code se chargera dès que le DOM sera chargé et avant que le contenu de la page ne soit chargé:
$(document).ready(function() {
// jQuery code goes here
});Vous pouvez utiliser window.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.
Et voici un moyen de le faire avec PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});Dans les navigateurs modernes avec javascript moderne (> = 2015), vous pouvez ajouter type="module"à votre balise de script, et tout ce qui se trouve dans ce script s'exécutera après le chargement de la page entière. par exemple:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>les navigateurs plus anciens comprendront également l' nomoduleattribut. Quelque chose comme ça:
<script nomodule>
alert("tuns after")
</script>Pour plus d'informations, vous pouvez visiter javascript.info .
onloadutilisation à la $(window).loadplace (jQuery):$(window).load(function() {
//code
});La propriété onload du mixin GlobalEventHandlers est un gestionnaire d'événements pour l'événement de chargement d'un élément Window, XMLHttpRequest, etc., qui se déclenche lorsque la ressource est chargée.
Donc, fondamentalement, javascript a déjà une méthode onload sur la fenêtre qui s'exécute quelle page est 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;
};Mise à jour 2019: c'est la réponse qui a fonctionné pour moi. Comme j'avais besoin de plusieurs demandes ajax pour tirer et renvoyer les données en premier pour compter les éléments de la liste.
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});