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.

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 );
}

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." );
}