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 exécute avant la page est chargée, Je ne peux pas accéder au <body> , entre autres choses. J'aimerais exécuter du JavaScript après que le document a été "chargé" (HTML entièrement téléchargé et in-RAM). Y a-t-il des événements sur lesquels je peux m'accrocher lorsque mon script s'exécute, qui seront déclenchés lors du chargement de la page?
24 réponses
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 façon d'aller puisqu'elle est discrète et est considérée plus standard .
raisonnablement portable, non-framework façon d'avoir votre script définir une fonction à exécuter au temps de charge:
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;
}
}
vous pouvez mettre un attribut "onload" à l'intérieur du 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 qu'il répondra à votre question.
notez que le $(window).charge d'exécuter après le document est rendu sur votre page.
gardez à l'esprit que le chargement de la page comporte plus d'une étape. Btw, C'est du pur JavaScript
"DOMContentLoaded"
cet événement est déclenché lorsque le document HTML initial a été complètement chargé et analysé , sans attendre que les feuilles de style, les images et les sous-cadres aient terminé le chargement. À ce stade, vous pouvez programmatically optimiser le chargement d'images et css basé sur l'appareil de l'utilisateur ou la vitesse de bande passante.
exécutes après chargement de DOM (avant img et css):
document.addEventListener("DOMContentLoaded", function(){
//....
});
Note: le JavaScript synchrone interrompt l'analyse du DOM. Si vous voulez que le DOM soit analysé aussi vite que possible après que l'Utilisateur a demandé la page, vous pouvez tourner votre JavaScript asynchrone et optimiser le chargement des feuilles de style
"charger"
un très différent événement, load , ne doit être utilisé que pour détecter une pleine page chargée . C'est une erreur incroyablement populaire d'utiliser load où DOMContentLoaded serait beaucoup plus approprié, donc soyez prudent.
S'exécute après que tout est chargé et analysé:
window.addEventListener("load", function(){
// ....
});
ressources MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
MDN liste de tous les événements:
si les scripts sont chargés dans le <head> du document, alors il est possible d'utiliser l'attribut defer dans la balise script.
exemple:
<script src="demo_defer.js" defer></script>
de https://developer.mozilla.org :
"151960920 de" reporter
cet attribut booléen est défini pour indiquer navigateur que le script est destiné à être exécuté après que le document a été analysée, mais avant mise à feu DOMContentLoaded.
cet attribut ne doit pas être utilisé si le src l'attribut est absent (i.e. pour les scripts inline), dans ce cas il serait n'ont aucun effet.
pour obtenir un effet similaire pour les scripts insérés dynamiquement utiliser async=false à la place. Les Scripts avec l'attribut defer exécutera 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 le placer?
coller code dans votre HTML juste avant la balise
</body>(près du bas de votre fichier HTML).
Que fait-il?
ce code indique d'attendre le chargement complet du document, puis de charger le fichier externe
deferredfunctions.js.
voici un exemple du code ci-dessus - différer le rendu de JS
j'ai écrit ceci basé sur chargement décalé de javascript concept de Google pagespeed et aussi provenant de cet article report de chargement javascript
Regardez accrochage document.onload ou en jQuery $(document).load(...) .
meilleure méthode, recommandée par Google aussi. :)
<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 l'équivalent de
$(document).ready(function () { })
<body onload="myFunction()">
ce code fonctionne bien.
mais window.onload méthode a diverses dépendances. Donc, il ne peut pas travailler tout le temps.
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
regardez ici: http://msdn.microsoft.com/en-us/library/ie/ms536957 (v=vs 85).aspx
il suffit de définir <body onload="aFunction()"> qui sera appelé après que la page a été chargée. Votre code dans le script est celui de aFunction() { } .
à l'Aide de la YUI bibliothèque (j'aime):
YAHOO.util.Event.onDOMReady(function(){
//your code
});
Portable et beau! Cependant, si vous n'utilisez pas YUI pour d'autres choses (voir son doc), 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>
je trouve parfois sur des pages plus complexes que tous les éléments sont chargés par la fenêtre de temps.onload est viré. Si c'est le cas, ajoutez setTimeout avant que votre fonction delay soit un moment. C'est pas très élégant mais c'est un simple hack qui rend bien.
window.onload = function(){ doSomethingCool(); };
devient...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
il y a une très bonne documentation sur la façon de détecter si le document a chargé en utilisant Javascript ou Jquery.
en utilisant le Javascript natif cela peut être atteint
if (document.readyState === "complete") {
init();
}
Cela peut aussi ê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;
}
Utilisant Jquery Pour vérifier seulement 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 la fenêtre.charge 151980920"
$( 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
});
$(window).("load", function(){ ... });
me va le mieux.
$(document).ready(function(){ ... }
fonctionnera, mais il n'attendra pas que la page soit chargée.
jQuery(window).load(function () { ... }
ne marche pas pour moi, casse le script suivant. J'utilise aussi jQuery 3.2.1 avec d'autres fourches jQuery.
pour masquer mes sites en chargeant la superposition, j'utilise ce qui suit:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>comme dit Daniel, vous pouvez utiliser le document.onload.
les différents cadres javascript hwoever (jQuery, Mootools, etc.) utiliser un événement personnalisé 'domready', qui je suppose doit être plus efficace. Si vous développez avec javascript, je vous recommande fortement d'exploiter un framework, ils augmentent massivement votre productivité.
my advise use asnyc attribut pour l'étiquette de script qui vous aide à charger les scripts externes après le chargement de page
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
jQuery l'enveloppe pour vous. Vous trouverez probablement que c'est la solution la plus facile.
use auto execution onload function
window.onload = function (){
/* statements */
}();