Differences

This shows you the differences between two versions of the page.

--- programmieren:javascript:script_wenn_seite_geladen_ausfuehren [2020/10/05 11:11] – jgehrke
+++ programmieren:javascript:script_wenn_seite_geladen_ausfuehren [2022/12/17 12:28] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
-====== On Page Ready - Javascript ausführen, wenn die Seite geladen/bereit ist ======
+====== 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.
+<code javascript>
+/* 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 );
+}
+</code>
+**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.
+<code javascript>
+/* 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 );
+}
+</code>
+===== Beispiel Anwendung =====
+Die Callback-Funktion kann eine anonyme Funktion (Beispiel 1) oder ein Funktionsname (Beispiel 2) sein.
 <code javascript>
-	/*
+/* Beispiel 1 */
-	Benutzung:
+on_ready( function(){
-	on_ready( FUNCTION_NAME );
+	console.log( "HTML ist geladen" );
-	oder:
+})
-	on_ready( function(){
-		...
-	});
-	*/
-	on_ready( function(){
-		console.log( "Seite ist geladen" );
-	})
+/* Beispiel 2 */
+on_load( complete_page_loaded );
-	function on_ready( callback ) {
+function complete_page_loaded(){
-		// Falls die Seite bereits geladen ist
+	console.log( "Alle Assets wurden geladen." );
-		if ( document.readyState!='loading' ) callback();
+}
-		// Falls die Seite noch lädt
-		else document.addEventListener( 'DOMContentLoaded', callback );
-	}
 </code>

User Tools

Site Tools

Differences

Page Tools