SWFObject über Google AJAX Libraries laden

Die AJAX Libraries von Google sind ein „Content Distribution Network“ für die bekanntesten Open Source Bibliotheken. Vor einigen Tagen wurde SWFObject neu in die Library aufgenommen.

Entscheidet man sich für die Google-Variante, benötigt man keine eigene Kopie von SWFObject auf seinem Server. Man lädt das JavaScript-File direkt von Google.

Google beschreibt die Vorteile der AJAX Libraries:

… high speed, globally available access to a growing list of the most popular JavaScript open source libraries […] We take the pain out of hosting the libraries, correctly setting cache headers, staying up to date with the most recent bug fixes, etc.

Somit stellt dies eine durchaus interessante Variante dar (z.B. für nicht-kommerzielle Websites). Ich nutze schon seit einer Weile jQuery auf diese Weise. Die Vor- und Nachteile von solchen „Offloading“-Methoden muss man im Einzelfall abwägen.

Tutorial zu SWFObject

Vorab: Wer sich noch nicht so gut mit SWFObject auskennt, sollte zuerst einen Blick hierauf werfen: SWFObject zum Einbetten von Flash (.swf) in HTML. Im Folgenden die Details, die man ändern muss, um auf Google umzusteigen.

google.load()-Methode

Folgende Zeilen werden in den HTML-Header integriert, um SWFObject zu initialisieren. Sie ersetzen die Zeile mit dem include-Befehl des JavaScripts.

[html]

[/html]

Diese Methode hat Vorteil, dass man auch gleich andere JavaScript-Bibliotheken über den load-Befehl laden kann. Dazu gehören:

• jQuery
• jQuery UI
• Prototype
• script_aculo_us
• MooTools
• Dojo
• Yahoo! User Interface Library (YUI)

Analog lautet der Aufruf z.B. google.load("jquery", "1");.

Beispiel anschauen

Direkte Integration

Braucht man nur SWFObject und keine anderen AJAX-Bibliotheken, kann auch der direkte Pfad zur JS-Datei eingebunden werden. Diese findet man in der Dokumentation (z.B. http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js für 2.1).

Dies bedeutet, dass man nur den SWFObject-Pfad von der eigenen URL auf die Google-URL umstellen muss.

[html]

[/html]

Beispiel anschauen

Link: AJAX Libraries API

[ad]