In meinen vorherigen Blog-Posts habe ich beschrieben wie man jQuery-Plugins programmiert und dynamisch mit der Lazy-Load Technologieweitere Scripte nachladen kann. Heute, in diesem Blog-Post möchte ich zeigen, wie man dieses Wissen einfach kombiniert und so eine modulare und wiederverwendbare Lösung schafft.
Im ersten Schritt schafft man sich die Grundlage für das Plugin in dem man die Grundstruktur für jQuery Plugins aus meinem vorherigen Post zum Thema Plugins übernimmt und den Namen anpasst.
... $.fn.lazyload= function( method ) ...
Damit hat man die Grundlage für das Lazyload-Plugin geschaffen. Im nächsten Schritt übernimmt man in die Methode des Plugins die Funktionalität der Lazyload-Funktion. Die Init-Methode erhält zwei Übergabeparameter: die zu ladende Datei und eine Callback Funktion. Daraus ergibt sich der folgende Quelltext für das Plugin in der Version 0.1.
/**
* jQuery lazyload Plugin (version 0.1)
*
* @copyright joocom GmbH
*
* @license Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*/
(function( $ ){
var methods = {
init : function( source, callback ) {
var done;
var script = window.document.createElement('script');
script.src=source;
if(typeof callback === 'function'){
script.onreadystatechange = script.onload=function(){
if(!done && script.readyState=="complete") {
callback();
done=1;
script.onload=script.onreadystatechange=null;
}
}
}
document.getElementsByTagName("head")[0].appendChild(script);
}
};
$.fn.lazyload= function( method ) {
if ( methods[method] ) {
return methods[method].apply(
this, Array.prototype.slice.call( arguments, 1 )
);
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist' );
}
};
})( jQuery );
Der Aufruf des Plugins erfolgt dann z.B.
$().lazyload('init','datei.js',function(){ alert('callback') });
Der erste Parameter steht für die Methode des Plugins, der zweite für die Datei die geladen werden soll und der dritte Parameter beinhaltet die Callback Funktion.
Auf einfache und schnelle Weise lassen sich so wiederverwendbare Plugins schaffen, die jeder Webentwickler in jedem seiner Projekte nutzen kann. Das Plugin kannst Du auch hier herunterladen.
Ein kleiner Hinweis, für den Produktiveinsatz ist dieses Plugin sicher noch nicht geeignet, da hierfür noch weitere Absicherungen des Quelltextes nötig sind. Das Beispiel soll nur dazu dienen die Verbindungen der beiden Technologien zu verdeutlichen.