Ich führe ein externes Skript mit einem <script>Inside aus <head>.
Da das Skript jetzt ausgeführt wird, bevor die Seite geladen wurde, kann ich <body>unter anderem nicht auf das zugreifen . Ich möchte etwas JavaScript ausführen, nachdem das Dokument "geladen" wurde (HTML vollständig heruntergeladen und im RAM). Gibt es Ereignisse, an die ich mich bei der Ausführung meines Skripts anschließen kann und die beim Laden der Seite ausgelöst werden?
Antworten:
Diese Lösungen werden funktionieren:
<body onload="script();">oder
document.onload = function ...oder auch
window.onload = function ...Beachten Sie, dass die letzte Option ein besserer Weg ist, da sie unauffällig ist und als Standard angesehen wird .
document.onload=ist nicht aufdringlich en.wikipedia.org/wiki/Unobtrusive_JavaScript
Einigermaßen portable Methode ohne Framework, mit der Ihr Skript eine Funktion zum Ausführen beim Laden festlegen kann:
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;
}
}
Dieses Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde , ohne darauf zu warten, dass Stylesheets, Bilder und Unterrahmen vollständig geladen sind . Zu diesem Zeitpunkt können Sie das Laden von Bildern und CSS programmgesteuert basierend auf dem Benutzergerät oder der Bandbreitengeschwindigkeit optimieren.
Wird ausgeführt, nachdem DOM geladen wurde (vor img und css):
document.addEventListener("DOMContentLoaded", function(){
//....
});
Hinweis: Synchrones JavaScript unterbricht das Parsen des DOM. Wenn Sie möchten, dass das DOM so schnell wie möglich analysiert wird, nachdem der Benutzer die Seite angefordert hat, können Sie Ihr JavaScript asynchronisieren und das Laden von Stylesheets optimieren
Ein ganz anderes Ereignis, Laden , sollte nur zum Erkennen einer vollständig geladenen Seite verwendet werden . Es ist ein unglaublich beliebter Fehler, load zu verwenden, wenn DOMContentLoaded viel angemessener wäre. Seien Sie also vorsichtig.
Exectues nachdem alles geladen und analysiert wurde:
window.addEventListener("load", function(){
// ....
});
MDN-Ressourcen:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
MDN-Liste aller Ereignisse:
window.onload = ...denken, dass mein Skript warten würde, bis alles vollständig heruntergeladen wurde, bevor es ausgeführt wird, aber es scheint sich window.onloadtatsächlich so zu verhalten document.addEventListener("DOMContentLoaded", ..., während das window.addEventListener("load", ...wirklich darauf wartet, dass alles vollständig heruntergeladen wird. Ich hätte gedacht, dass window.onloaddas eher gleichbedeutend sein sollte window.addEventListener("load", ...als document.addEventListener("DOMContentLoaded", ...?? Ich habe das gleiche Ergebnis in Chrome und FF erhalten.
Sie können ein "onload" -Attribut in den Body einfügen
...<body onload="myFunction()">...Oder wenn Sie jQuery verwenden, können Sie dies tun
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
Ich hoffe es beantwortet deine Frage.
Beachten Sie, dass das Laden von $ (Fenster) ausgeführt wird, nachdem das Dokument auf Ihrer Seite gerendert wurde.
Wenn die Skripte in das <head>Dokument geladen werden , kann das deferAttribut im Skript-Tag verwendet werden.
Beispiel:
<script src="demo_defer.js" defer></script>Von https://developer.mozilla.org :
verschieben
Dieses boolesche Attribut gibt einem Browser an, dass das Skript ausgeführt werden soll, nachdem das Dokument analysiert wurde, jedoch bevor DOMContentLoaded ausgelöst wird.
Dieses Attribut darf nicht verwendet werden, wenn das src-Attribut fehlt (dh für Inline-Skripte). In diesem Fall hätte es keine Auswirkung.
Um einen ähnlichen Effekt für dynamisch eingefügte Skripte zu erzielen, verwenden Sie stattdessen async = false. Skripte mit dem Attribut defer werden in der Reihenfolge ausgeführt, in der sie im Dokument angezeigt werden.
Hier ist ein Skript, das auf dem verzögerten Laden von js basiert, nachdem die Seite geladen wurde.
<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>
Wo platziere ich das?
Fügen Sie Code direkt vor dem
</body>Tag in Ihren HTML-Code ein (am Ende Ihrer HTML-Datei).
Was tut es?
Dieser Code besagt, dass Sie warten müssen, bis das gesamte Dokument geladen ist, und dann die externe Datei laden
deferredfunctions.js.
Hier ist ein Beispiel für den obigen Code - Rendering von JS verzögern
Ich schrieb diese basierend auf defered Laden von Javascript Page Speed google Konzept und auch aus diesem Artikel sourced Aufschieben Laden Sie Javascript
Schauen Sie sich Hooking document.onloadoder in jQuery an $(document).load(...).
Arbeits Fiddle auf<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
Wenn Sie jQuery verwenden,
$(function() {...});
ist äquivalent zu
$(document).ready(function () { })
oder eine andere kurze Hand:
$().ready(function () { })
Siehe Welches Ereignis wird bei JQuery $ function () ausgelöst? und https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}Schauen Sie hier: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Ich finde manchmal auf komplexeren Seiten, dass nicht alle Elemente vom Zeitfenster geladen wurden. Onload wird ausgelöst. Wenn dies der Fall ist, fügen Sie setTimeout hinzu, bevor Ihre zu verzögernde Funktion einen Moment dauert. Es ist nicht elegant, aber es ist ein einfacher Hack, der gut rendert.
window.onload = function(){ doSomethingCool(); };wird...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };Definieren Sie einfach, <body onload="aFunction()">dass aufgerufen wird, nachdem die Seite geladen wurde. Ihr Code im Skript wird dann von eingeschlossen aFunction() { }.
<body onload="myFunction()">Dieser Code funktioniert gut.
Die window.onloadMethode hat jedoch verschiedene Abhängigkeiten. Es funktioniert also möglicherweise nicht immer.
Verwenden der YUI-Bibliothek (ich liebe es):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Tragbar und schön! Wenn Sie YUI jedoch nicht für andere Zwecke verwenden (siehe Dokument), würde ich sagen, dass es sich nicht lohnt, es zu verwenden.
NB: Um diesen Code zu verwenden, müssen Sie 2 Skripte importieren
<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>Es gibt eine sehr gute Dokumentation zum Erkennen, ob ein Dokument mit Javascript oder Jquery geladen wurde .
Mit dem nativen Javascript kann dies erreicht werden
if (document.readyState === "complete") {
init();
}Dies kann auch innerhalb des Intervalls erfolgen
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;
}Verwenden von Jquery Nur um zu überprüfen, ob DOM bereit ist
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});Um zu überprüfen, ob alle Ressourcen geladen sind, verwenden Sie window.load
$( window ).load(function() {
console.log( "window loaded" );
});Verwenden Sie diesen Code mit der jQuery-Bibliothek, dies würde einwandfrei funktionieren.
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready () funktioniert am besten für mich.
$(document).ready(function(){ ... });.load () wird funktionieren, aber es wird nicht warten, bis die Seite geladen ist.
jQuery(window).load(function () { ... });Funktioniert bei mir nicht, bricht das nächste Inline-Skript. Ich verwende auch jQuery 3.2.1 zusammen mit einigen anderen jQuery-Gabeln.
Um das Laden von Overlays auf meinen Websites auszublenden, verwende ich Folgendes:
<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");
});HINWEIS: - Verwenden Sie das folgende Markup nicht (da es andere gleichartige Deklarationen überschreibt):
document.onreadystatechange = ...Wie Daniel sagt, könnten Sie document.onload verwenden.
Die verschiedenen Javascript-Frameworks (jQuery, Mootools usw.) verwenden jedoch ein benutzerdefiniertes Ereignis "domready", das meiner Meinung nach effektiver sein muss. Wenn Sie mit Javascript entwickeln, würde ich dringend empfehlen, ein Framework zu nutzen, das Ihre Produktivität massiv steigert.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Mein Rat verwendet ein asnycAttribut für ein Skript-Tag, mit dem Sie die externen Skripte nach dem Laden der Seite laden können
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>Verwenden Sie die Selbstausführungs-Onload-Funktion
window.onload = function (){
/* statements */
}(); onloadMit diesem Ansatz können Sie andere Handler überschreiben . Stattdessen sollten Sie einen Listener hinzufügen.