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

/* 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

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