JavaScript qui s'exécute après le chargement de la page
J'exécute un script externe en utilisant un <script> à l'intérieur de <head>.
Maintenant que le script est exécuté avant la page s'est chargée, je ne peux pas accéder au <body>, entre autres. 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). Existe-t-il des événements auxquels je peux m'attacher lors de l'exécution de mon script, qui seront déclenchés au chargement de la page?
Ces solutions fonctionneront:
<body onload="script();">
ou
document.onload = function ...
ou même
window.onload = function ...
Notez que la dernière option est un meilleur moyen d’aller car elle est discrète et est considérée comme plus standard .
Méthode raisonnablement portable et non-structurée 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. Btw, c'est pur JavaScript
"DOMContentLoaded"
Cet événement est déclenché lorsque le document HTML initial a été complètement chargé et analysé , sans attendre que le chargement se termine sur les feuilles de style, les images et les sous-images. À ce stade, vous pouvez optimiser par programme le chargement des images et des CSS en fonction du périphérique utilisateur ou de la vitesse de la bande passante.
Exectues après le chargement du DOM (avant img et css):
document.addEventListener("DOMContentLoaded", function(){
//....
});
Remarque: JavaScript synchronisé interrompt 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 JavaScript en tant qu'asynchrone et optimiser le chargement de feuilles de style
"charge"
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 load où DOMContentLoaded serait beaucoup plus approprié, alors soyez prudent.
Exécutions après que tout soit chargé et analysé:
window.addEventListener("load", function(){
// ....
});
Ressources MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoadedhttps://developer.mozilla.org/en-US/docs/Web/ Événements/charge
Liste MDN de tous les événements:
Vous pouvez mettre un attribut "onload" dans le corps
...<body onload="myFunction()">...
Ou si vous utilisez jQuery, vous pouvez 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 <head> du document, vous pouvez utiliser l'attribut defer 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 doit être exécuté après l'analyse du document, mais avant le déclenchement de DOMContentLoaded.
Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts intégrés), dans ce cas, cela n'aurait aucun effet.
Pour obtenir un effet similaire pour les scripts à insertion dynamique, utilisez plutôt async = false. Les scripts avec l'attribut différé s'exécutent 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).
Que fait-il?
Ce code indique d'attendre que l'ensemble du document soit chargé, puis chargez le fichier externe
deferredfunctions.js.
Voici un exemple du code ci-dessus - Defer Rendering of JS
J'ai écrit ceci en fonction de chargement différé de javascript pagespeed google concept et également issu de cet article différer 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
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
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
Si vous utilisez jQuery,
$(function() {...});
est équivalent à
$(document).ready(function () { })
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 tel 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 bidouillage qui rend bien.
window.onload = function(){ doSomethingCool(); };
devient...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
<body onload="myFunction()">
Ce code fonctionne bien.
Mais la méthode window.onload a différentes dépendances. Cela peut donc ne pas fonctionner tout le temps.
Il suffit de définir <body onload="aFunction()"> qui sera appelée une fois la page chargée. Votre code dans le script est compris entre aFunction() { }.
En utilisant le YUI library (I love it):
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 l'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>
$ (fenêtre) .on ("charger", fonction () {...});
. ready () me convient le mieux.
$(document).ready(function(){ ... });
. load () fonctionnera, mais il n'attendra pas que la page soit chargée.
jQuery(window).load(function () { ... });
Ne fonctionne pas pour moi, rompt le prochain script 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>
Il existe une très bonne documentation sur Comment - détecter si le document a été chargé en utilisant Javascript ou Jquery.
En utilisant le Javascript natif, cela peut être réalisé
if (document.readyState === "complete") {
init();
}
Cela peut aussi être fait dans 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
});
Mon conseil utilise l'attribut asnyc 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>
Comme Daniel le dit, vous pouvez utiliser document.onload.
Les différents frameworks javascript utilisés presque partout (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é.
utiliser la fonction d'auto-exécution en charge
window.onload = function (){
/* statements */
}();
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>