====== On Page Ready/Loaded - Javascript ausführen, wenn die Seite geladen/bereit ist ====== Mit diesem Script kann man eine Funktion aufrufen, die prüft ob das Dom geladen wurde und das Script aufgerufen werden kann. Es ist eine alternative zu ''jQuerys.ready()'' Methode. Diese Methode kann man auch nutzen, falls die Seite bereits geladen wurde. ===== Grundfunkionen ===== **Diese Funktion ruft eine Funktion(Callback) auf, wenn bereits das HTML geladen ist** Das Script wird ausgeführt, wenn das HTML geparsed wurde. Es kann aber sein, dass noch nicht alle Medien, Bilder oder Stylesheets geladen wurden. /* Wenn HTML Geladen & Geparsed ist */ function on_ready( callback ) { // Falls die Seite bereits geladen ist if ( document.readyState!='loading' ) callback(); // Falls die Seite noch lädt else document.addEventListener( 'DOMContentLoaded', callback ); } **Diese Funktion ruft eine Funktion(Callback) auf, wenn alle Assets geladen wurden** Das heißt, dass Javascript wird erst ausgeführt, wenn alle CSS Stylesheets und Bilder geladen wurden. /* Wenn alles geladen (Css, Bilder) ist */ function on_load( callback ) { // Falls die Seite bereits geladen ist if ( document.readyState=='complete' ) callback(); // Falls die Seite noch lädt else window.addEventListener( 'load', callback ); } ===== Beispiel Anwendung ===== Die Callback-Funktion kann eine anonyme Funktion (Beispiel 1) oder ein Funktionsname (Beispiel 2) sein. /* Beispiel 1 */ on_ready( function(){ console.log( "HTML ist geladen" ); }) /* Beispiel 2 */ on_load( complete_page_loaded ); function complete_page_loaded(){ console.log( "Alle Assets wurden geladen." ); }