Erneutes Laden der kompletten Seite vermeinden, indem durch jQuery Inhalte direkt aus Dateien geladen werden
Eines der besten Elemente beim Einsatz eines JavaScript Frameworks wie jQuery ist die Abstraktion des Webbrowsers. Designer müssen sich nicht länger mit den spezifischen Eigenschaften eines Webbrowsers auseinandersetzen und können sich auf das eigentliche Ziel ihrer Arbeit konzentrieren.
Es ist grundsätzlich eine gute Idee, eine Umsetzung an einer weit verfügbaren Unterstützung von Browsern festzumachen und genau dieser Tipp zeigt, wie das funktioniert. Das Laden von Inhalten über AJAX kann die augenscheinliche Ladegeschwindigkeit einer Webseite deutlich beschleunigen und das Benutzererlebnis deutlich steigern. Man kann mit AJAX auch festlegen, was Web Spider auf der Website wirklich sehen sollen, beispielsweise indem man komplexe Inhalte, die nicht für die Suchoptimierung notwendig sind, getrennt läd.
Die Grundvoraussetzung ist extrem einfach: ein Event wird durch den Benutzer abgefeuert, das wiederum das Laden von neuen Inhalten in ein Objekt der darzustellenden Seite auslöst. Da wir kontrollieren können, welches Event wir für den Trigger benutzen wollen, wird der Inhalt genau dann geladen, wenn die Zeit reif für eine Optimierung des Benutzererlebnisses ist.
In diesem Beispiel zeigen wir, wie durch Abfangen von Klicks auf Links das href-Attribute zum Laden von relevanten Inhalten, vor dessen Darstellung, verwendet wird. In dieser Methode liegen zahllose Möglichkeiten – denken Sie beispielsweise an iPhone-Bewegungen, wo der neue Inhalt von rechts in den Blickpunkt rückt und den alten Inhalt dabei nach links verschiebt. Durch das Einklinken in die regulären a-Tags können wir sicherstellen, dass auch ein Benutzer ohne aktiviertes JavaScript die Seite so sieht, wie vorgesehen. Der grundlegende Code besteht aus lediglich ein paar Zeilen.
Als Erstes müssen wir sicherstellen, dass das jQuery-Framework in unserer Seite zur Verfügung steht. Dazu laden wir das Framework von www.jquery.com herunter und binden es so in unsere Seite ein:
<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
Danach folgt die eigentliche Funktion:
$(document).ready(function()
{
$("#navigation a").click(function()
{
var pageToLoad = $(this).attr("href");
var pageContent;
$.get(pageToLoad, function(data)
{
pageContent=data;
$("#content").fadeOut("slow", function()
{
$("#content").html(pageContent);
$("#content").fadeIn("slow");
});
});
return false;
});
});
Seite wie üblich erstellen
Erstellt eure Website wie gewohnt, indem ihr mit HTML und CSS den Inhalt anordnet und in Seiten verpackt. Existiert ein Bereich, der einen Vorteil bieten würde, wenn er den Inhalt ohne das Nachladen der gesamten Seite anzeigen soll? Dann lohnt sich hier der Einsatz von AJAX zum Laden dieser Inhalte.
Testen und anpassen
Wenn ihr eure Seite jetzt prüft, sollte diese den Inhalt aus dem Div-Tag holen, ohne die komplette Seite neu nachzuladen.
Viel Spaß beim Testen!
// ]]>
