Inhalte mit jQuery nachladen

Da eine der wichtigsten Voraussetzungen von Webseiten, die Ladezeit ist, wollen wir heute darüber sprechen, wie wir diese verbessern können. Viel Ladezeit geht dafür drauf, dass wir alles neu laden, wenn wir nur den Inhalt und dessen Skripte neu Laden würden, könnten wir diese verbessern. Ein schöner Nebeneffekt ist, Inhalte wie in einer App zu laden. Ein Nachteil ist, dass der Inhalt selbst nicht mehr im Dokument steht und somit nicht von Suchmaschinen ausgelesen werden kann.

jQuery - load - Inhalte

© Next Level Design

Was benötigen wir?

Einen Ordner "Inhalte" aus dem unser JavaScript die Inhalte auslesen kann.

  • inhalte
    • inhalt_start.php
    • inhalt_kontakt.php
    • inhalt_impressum.php
jQuery(document).ready(function() {
	jQuery("#article").load("/jquery_load_inhalte/inhalte/inhalt_start.php");
	jQuery("#topmenu>ul>li").each(function() {
		jQuery(this).find("a").click(function() {
			jQuery("#article").html("<div id=\"ajax_loader\"></div>");
			jQuery("#article").load("/jquery_load_inhalte/inhalte/inhalt_"+jQuery(this).data("file")+".php");
			jQuery("#topmenu>ul>li").removeClass("active");
			jQuery(this).parent("li").addClass("active");
			return false;
		});
	});
});

Alternativ könnte man das Nachladen auch mit Ajax lösen, mit der Übergabe von Parametern an eine PHP Methode, können Inhalte vor dem Anzeigen generiert werden.

Feel free to use jquery_load_inhalte.zip

Kommentare

Kommentare können nur mit einer Verifizierten E-Mail-Adresse geschrieben werden, die E-Mail-Adresse muss einmal bestätigt werden.
@
(success)