JavaScript qui s'exécute après le chargement de la page
https://stackoverflow.com/questions/807878
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'exécute un script externe en utilisant un < script > dans < tête > .
Maintenant que le script exécute avant que la page soit chargée, je ne peux pas accéder au < body > , entre autres choses. J'aimerais exécuter du code JavaScript après que le document ait été "chargé". (HTML entièrement téléchargé et en mémoire vive). Y a-t-il des événements auxquels je peux m'attacher lorsque mon script est exécuté, qui seront déclenchés au chargement de la page?
La solution
Ces solutions fonctionneront:
<body onload="script();">
ou
document.onload = function ...
ou même
window.onload = function ...
Notez que la dernière option est une meilleure solution , car elle est unobstrusive. et est considéré comme plus standard .
Autres conseils
Moyen raisonnablement portable et non-framework permettant à votre script de définir une fonction à exécuter au moment du chargement:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
N'oubliez pas que le chargement de la page comporte plusieurs étapes. Au fait, c'est purement JavaScript
"DOMContentLoaded"
Cet événement est déclenché lorsque le document HTML initial a été complètement chargé et analysé , sans attendre le chargement du chargement des feuilles de style, des images et des sous-images. À ce stade, vous pouvez optimiser par programmation le chargement des images et des CSS en fonction de la vitesse de la bande passante et du périphérique utilisateur.
Exectues après le chargement du DOM (avant img et css):
document.addEventListener("DOMContentLoaded", function(){
//....
});
Remarque: JavaScript synchrone met en pause l'analyse du DOM. Si vous souhaitez que le DOM soit analysé aussi rapidement que possible après que l'utilisateur a demandé la page, vous pouvez activer votre code JavaScript asynchrone et optimiser le chargement des feuilles de style
"charger"
Un événement très différent, load , ne doit être utilisé que pour détecter une page entièrement chargée . C’est une erreur incroyablement populaire d’utiliser une charge où DOMContentLoaded serait bien plus approprié, alors soyez prudent.
Exécutions une fois que tout est chargé et analysé:
window.addEventListener("load", function(){
// ....
});
Ressources MDN:
https://developer.mozilla.org/en-US/ docs / Web / Événements / DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web / Events / load
Liste MDN de tous les événements:
Vous pouvez mettre un "onload" " attribut à l'intérieur du corps
...<body onload="myFunction()">...
Ou si vous utilisez jQuery, vous pouvez le faire
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
J'espère que cela répond à votre question.
Notez que $ (window) .load sera exécuté après le rendu du document sur votre page.
Si les scripts sont chargés dans le < tête > du document, il est alors possible d'utiliser l'attribut différer dans la balise de script.
Exemple:
<script src="demo_defer.js" defer></script>
De https: //developer.mozilla. org :
différer
Cet attribut booléen est défini pour indiquer à un navigateur que le script est destiné à être exécuté après l'analyse du document, mais avant DOMContentLoaded de déclenchement.
Cet attribut ne doit pas être utilisé si le src l'attribut est absent (c'est-à-dire pour les scripts intégrés), dans ce cas, il n'a aucun effet.
Pour obtenir un effet similaire pour les scripts insérés dynamiquement, utilisez async = false à la place. Scripts avec l'attribut de différer s'exécutera dans l'ordre dans lequel ils apparaissent dans le document.
Voici un script basé sur le chargement différé de js après le chargement de la page,
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Où dois-je placer ceci?
Collez le code dans votre code HTML juste avant la balise
< / body >(près du bas de votre fichier HTML).
Qu'est-ce que cela fait?
Ce code indique d'attendre le chargement de l'ensemble du document, puis chargez le fichier externe
deferredfunctions.js.
Voici un exemple du code ci-dessus - Différer le rendu de JS .
J'ai écrit ceci en fonction du chargement différé de javascript , suivi d'une page google concept et également tiré de cet article Reporter le chargement de javascript
Regardez accrocher document.onload ou dans jQuery $ (document) .load (...) .
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
regardez ici: http: // msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Meilleure méthode, recommandée par Google également. :)
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
http://www.feedthebot.com/pagespeed/defer-loading- javascript.html
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
Si vous utilisez jQuery,
$ (function () {...});
est équivalent à
$ (document) .ready (function () {})
<body onload="myFunction()">
Ce code fonctionne bien.
Mais la méthode window.onload a différentes dépendances. Il se peut donc que cela ne fonctionne pas tout le temps.
Je trouve parfois sur des pages plus complexes que tous les éléments n'ont pas été chargés par le temps window.onload est déclenché. Si c'est le cas, ajoutez setTimeout avant que votre fonction ne soit différée. Ce n’est pas élégant, mais c’est un simple hack qui rend bien.
window.onload = function(){ doSomethingCool(); };
devient ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Il suffit de définir < body onload = "aFunction ()" > à appeler une fois la page chargée. Votre code dans le script est compris entre aFunction () {} .
$ (fenêtre) .on ("charger", function () {...});
.ready () me convient le mieux.
$(document).ready(function(){ ... });
.load () fonctionnera, mais ne fonctionnera pas. attendez que la page soit chargée.
jQuery(window).load(function () { ... });
Ne fonctionne pas pour moi, rompt le script suivant en ligne. J'utilise également jQuery 3.2.1 avec d'autres fourches jQuery.
Pour masquer la superposition de chargement de mes sites Web, j'utilise les éléments suivants:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
Utilisation de la bibliothèque YUI (j'adore):
YAHOO.util.Event.onDOMReady(function(){
//your code
});
Portable et beau! Cependant, si vous n'utilisez pas YUI pour d'autres tâches (voir sa documentation), je dirais que cela ne vaut pas la peine de les utiliser.
N.B. : pour utiliser ce code, vous devez importer 2 scripts
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
Il existe une très bonne documentation sur Comment détecte si le document a été chargé à l'aide de Javascript ou de Jquery.
En utilisant le Javascript natif, cela peut être réalisé
if (document.readyState === "complete") {
init();
}
Ceci peut également être fait à l'intérieur de l'intervalle
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);
switch (document.readyState) {
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}
Utilisation de Jquery Pour vérifier uniquement si DOM est prêt
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
Pour vérifier si toutes les ressources sont chargées, utilisez window.load
$( window ).load(function() {
console.log( "window loaded" );
});
Utilisez ce code avec la bibliothèque jQuery, cela fonctionnerait parfaitement.
$(window).bind("load", function() {
// your javascript event
});
Comme le dit Daniel, vous pouvez utiliser document.onload.
Les différents frameworks javascript utilisés couramment (jQuery, Mootools, etc.) utilisent un événement personnalisé 'domready', ce qui, je suppose, doit être plus efficace. Si vous développez avec javascript, je vous recommande fortement d'exploiter un framework, cela augmente considérablement votre productivité.
Mon conseil utilise l'attribut async pour les balises de script, ce qui vous aide à charger les scripts externes après le chargement de la page
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>
utilise la fonction d'auto-exécution onload
window.onload = function (){
/* statements */
}();
