J'exécute un script externe, en utilisant un <script>intérieur <head>.
Maintenant, puisque le script s'exécute avant le chargement de la page, je ne peux pas accéder à <body>, entre autres choses. Je voudrais exécuter du JavaScript une fois que le document a été "chargé" (HTML entièrement téléchargé et en RAM). Y a-t-il des événements auxquels je peux me connecter lorsque mon script s'exécute, qui seront déclenchés au chargement de la page?
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 de procéder car elle est discrète et est considérée comme plus standard .
document.onload=est non intrusif en.wikipedia.org/wiki/Unobtrusive_JavaScript
Moyen raisonnablement portable et non-framework d'avoir votre script défini 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;
}
}Cet événement est déclenché lorsque le document HTML initial a été complètement chargé et analysé , sans attendre la fin du chargement des feuilles de style, des images et des sous-trames. À ce stade, vous pouvez optimiser par programme le chargement des images et des css en fonction de la machine utilisateur ou de la vitesse de la bande passante.
S'exécute après le chargement de DOM (avant img et css):
document.addEventListener("DOMContentLoaded", function(){
//....
});Remarque: JavaScript synchrone interrompt l'analyse du DOM. Si vous souhaitez que le DOM soit analysé le plus rapidement possible après que l'utilisateur a demandé la page, vous pouvez activer votre JavaScript asynchrone et optimiser le chargement des feuilles de style
Un événement très différent, la charge , ne doit être utilisé que pour détecter un page entièrement chargée . C'est une erreur incroyablement populaire d'utiliser la charge là où DOMContentLoaded serait beaucoup plus approprié, alors soyez prudent.
Exécute une fois 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
Liste MDN de tous les événements:
window.onload = ...penser que mon script attendrait que tout soit entièrement téléchargé avant de s'exécuter, mais il semble window.onloadse comporter comme document.addEventListener("DOMContentLoaded", ..., alors que le window.addEventListener("load", ...attend vraiment que tout soit entièrement téléchargé. J'aurais pensé que cela window.onloaddevrait être équivalent à window.addEventListener("load", ...plutôt que document.addEventListener("DOMContentLoaded", ...?? J'ai obtenu le même résultat dans Chrome et FF.
Vous pouvez mettre un attribut "onload" à 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épondra à votre question.
Notez que le $ (window) .load s'exécutera après le rendu du document sur votre page.
Si les scripts sont chargés dans le <head>document, il est possible d'utiliser ledefer attribut dans la balise de script.
Exemple:
<script src="demo_defer.js" defer></script>De https://developer.mozilla.org :
reporter
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 le lancement de DOMContentLoaded.
Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts en ligne), dans ce cas, il n'aurait aucun effet.
Pour obtenir un effet similaire pour les scripts insérés dynamiquement, utilisez plutôt async = false. Les scripts avec l'attribut defer s'exécuteront dans l'ordre dans lequel ils apparaissent dans le document.
Voici un script basé sur le chargement js différé 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 cela?
Collez le code dans votre code HTML juste avant la
</body>balise (près du bas de votre fichier HTML).
Qu'est ce que ça fait?
Ce code indique d'attendre le chargement de tout le 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 cela sur la base du chargement différé du concept google pagespeed de javascript et également à partir de cet article Différer le chargement de javascript
Regardez le hooking document.onloadou dans jQuery $(document).load(...).
Fiddle de travail sur<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><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 () { })
ou une autre main courte:
$().ready(function () { })
Voir sur quel événement JQuery $ function () se déclenche-t-il? et https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}regardez ici: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Je trouve parfois sur des pages plus complexes que tous les éléments n'ont pas été chargés par la fenêtre de temps. Si c'est le cas, ajoutez setTimeout avant que votre fonction de délai soit un instant. 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()">cela sera appelé après le chargement de la page. Votre code dans le script est alors entouré de aFunction() { }.
<body onload="myFunction()">Ce code fonctionne bien.
Mais la window.onloadméthode a différentes dépendances. Cela peut donc ne pas fonctionner tout le temps.
Utilisation de la bibliothèque YUI (je l'adore):
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.
NB: 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 la façon de détecter si le document a été chargé aide de Javascript ou de Jquery.
En utilisant le Javascript natif, cela peut être réalisé
if (document.readyState === "complete") {
init();
}Cela 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
});$(window).on("load", function(){ ... });.ready () fonctionne mieux pour moi.
$(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, brise le script en ligne suivant. 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>document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});REMARQUE: - N'utilisez pas le balisage ci-dessous (car il écrase les autres déclarations de même type):
document.onreadystatechange = ...Comme Daniel le dit, vous pouvez utiliser document.onload.
Les différents frameworks javascript hwoever (jQuery, Mootools, etc.) utilisent 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é.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Mon conseil utilise l' asnycattribut pour la balise de script 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>utiliser la fonction onload d'auto-exécution
window.onload = function (){
/* statements */
}(); onloadgestionnaires en utilisant cette approche. Au lieu de cela, vous devez ajouter un écouteur.