Ich habe ein Skript, das Folgendes verwendet $(document).ready , aber es verwendet nichts anderes von jQuery. Ich möchte es durch Entfernen der jQuery-Abhängigkeit aufhellen.
Wie kann ich meine eigene $(document).ready Funktionalität ohne jQuery zu verwenden? Ich weiß, dass mit window.onload wird nicht dasselbe sein, da window.onload wird ausgelöst, nachdem alle Bilder, Rahmen usw. geladen wurden.
Hier (im folgenden Ausschnitt) ist ein Vergleich ausgewählter verfügbarer "eingebauter" Browser-Methoden und ihrer Ausführungsreihenfolge. Bemerkungen
document.onload (X) wird von keinem modernen Browser unterstützt (event is never gebrannt )<body onload="bodyOnLoad()"> (F) und zur gleichen Zeit window.onload (E) dann wird nur die erste ausgeführt (weil sie die zweite aufhebt)<body onload="..."> (F) wird umhüllt von zusätzlichen onload Funktiondocument.onreadystatechange (D) nicht außer Kraft setzen document .addEventListener('readystatechange'...) (C) wahrscheinlich Cecasue onXYZevent-like Methoden unabhängig sind als addEventListener Warteschlangen (was das Hinzufügen mehrerer Hörer ermöglicht). Wahrscheinlich passiert nichts zwischen der Ausführung dieser beiden Handler.div schreiben ihre Zeitstempel auch in den Textkörper (klicken Sie nach der Skriptausführung auf den Link "Full Page", um ihn zu sehen).readystatechange (C,D) werden vom Browser mehrfach ausgeführt, jedoch für unterschiedliche Dokumentzustände:DOMContentLoadedvollständig - das Dokument und die Ressourcen geladen werden, bevor body/window onload
<html>
<head>
<script>
// solution A
console.log([timestamp: ${Date.now()}] A: Head script) ;
// solution B
document.addEventListener("DOMContentLoaded", () => {
print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`);
});
// solution C
document.addEventListener('readystatechange', () => {
print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`);
});
// solution D
document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)};
// solution E (never executed)
window.onload = () => {
print(`E: <body onload="..."> override this handler`);
};
// solution F
function bodyOnLoad() {
print(`[timestamp: ${Date.now()}] F: <body onload='...'>`);
infoAboutOnLoad(); // additional info
}
// solution X
document.onload = () => {print(`document.onload is never fired`)};
// HELPERS
function print(txt) {
console.log(txt);
if(mydiv) mydiv.innerHTML += txt.replace('<','<').replace('>','>') + '<br>';
}
function infoAboutOnLoad() {
console.log("window.onload (after override):", (''+document.body.onload).replace(/\s+/g,' '));
console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`);
}
console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' '));</script> </head>
<body onload="bodyOnLoad()"> <div id="mydiv"></div>
<!-- this script must te at the bottom of <body> -->
<script>
// solution G
print([timestamp: ${Date.now()}] G: <body> bottom script);
</script>
</body>
</html>
Heutzutage sollten Sie Module verwenden. Fügen Sie Ihren Code in die Standardfunktion eines Moduls ein und importieren Sie die Funktion in ein Skriptelement.
client.js :
export default function ()
{
alert ("test");
}index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="module">
import main from './client.js';
main ();
</script>
</body>
</html>
Wie wäre es mit dieser Lösung?
// other onload attached earlier
window.onload=function() {
alert('test');
};
tmpPreviousFunction=window.onload ? window.onload : null;
// our onload function
window.onload=function() {
alert('another message');
// execute previous one
if (tmpPreviousFunction) tmpPreviousFunction();
};
Ich benutze einfach:
setTimeout(function(){
//reference/manipulate DOM here
});Und im Gegensatz zu document.addEventListener("DOMContentLoaded" //etc wie in der allerersten Antwort, funktioniert es bis zurück zu IE9 -- http://caniuse.com/#search=DOMContentLoaded wird erst seit IE11 angezeigt.
Interessanterweise bin ich über Folgendes gestolpert setTimeout Lösung im Jahr 2009: Ist es übertrieben, die Bereitschaft des DOMs zu prüfen? was wahrscheinlich etwas besser hätte formuliert werden können, da ich meinte: "Ist es ein Overkill, die komplizierteren Ansätze verschiedener Frameworks zu verwenden, um die Bereitschaft des DOM zu prüfen?
Meine beste Erklärung dafür, warum diese Technik funktioniert, ist, dass, wenn das Skript mit einem solchen setTimeout erreicht wurde, das DOM gerade geparst wird, so dass die Ausführung des Codes innerhalb des setTimeout verschoben wird, bis dieser Vorgang abgeschlossen ist.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
302 Stimmen
...und auch definitiv nicht die gleiche Funktionalität.
46 Stimmen
Als diese Antwort Staaten, wenn alles, was Sie von jQuery wollen, ist
$(document).readykönnen Sie dieses Problem leicht lösen, indem Sie Ihren Code ganz unten auf der Seite ausführen, anstatt oben. HTML5Boilerplate verwendet genau diesen Ansatz.5 Stimmen
Warum nicht einfach den DOMContentLoaded verwenden? Es ist IE9+ caniuse.com/domcontentloaded developer.mozilla.org/de-US/docs/Web/Events/DOMContentLoaded
0 Stimmen
Ein Blick lohnt sich: developer.mozilla.org/de-US/docs/Web/API/Document/readyState
0 Stimmen
developer.mozilla.org/de-US/docs/Web/API/Document/