Ist mein jQuery Plugins eins der besten welche im Mai geschrieben/veröffentlicht wurden? Diese Ansicht vertritt auf jeden fall die englische Seite ajaxline.com und nimt mein loadAnimation Plugin in ihre Liste der besten 30 Plugins vom Mai auf. Ob es diese Ehre wirklich verdient weiss ich jedoch nicht den es ist doch recht simpel, doch vielleicht war  genau das einer der entscheidenden Gründe… ich weis es nicht. Ich bedanke mich jedoch für die Linkung auf dem Blog und freue mich darüber, dass ich noch anderen Entwicklern ein wenig Arbeit abnehmen konnte indem ich die Funktion in ein jQuery Addon gepackt habe. Wer es noch nicht kennt und gerne ausprobieren möchte, kann es unter Downloads herunterladen.

jQuery ist ein sehr Praktisches JavaScript Framework, welches einfach zu bedienen und auch ganz schön schnell ist. Seit der Version 1.3 sind die Selectoren auch nochmals um ein vielfaches schneller geworden. Trotzdem ist es, vor allem bei grösseren Projekten, nie verkehrt den JavaScript Code zu optimieren. Dafür habe ich einige einfache Tips, welche helfen die Ausführungszeit des JavaScripts zu verringern.

Herkömliche Browser Funktionen sind immer schneller als Funktionen in einer Library

Beispielsweise sollte man eher das normale for () vom JavaScript benützen als die jQuery Funktion $.each() auch wenn diese mehr Funktionen liefert. Ebenso sollte darauf geachtet werden, dass möglichst wenig Funktionen benützt werden.  Also das man sich erst den gesamten String zusammenbaut und erst danach den String in den Ort im DOM einfügt, an welchem er hin gehört.

Keine langen String Verkettungen machen, stattdessen die Array Fuktion join nützen

 var tmp = '';
for (var i=0; i< =rows.length; i++) {
       tmp += '
'+rows[i]+'';
}
alert(tmp);  

// ist schneller
var tmp = [];
for (var i=1; i< =rows.length; i++) {
      tmp[i] = '
'+rows[i-1]+''; $
}
alert(tmp.join('')); 

Einfachere Selectoren auf kleinere DOM Teile angewendet sind schneller</b><br /> Am schnellsten ist der Selector $(‘#id’). Wenn immer möglich sollte man für jedes Element, welches angesprochen werden soll eine eigene ID setzten und das Element darüber ansprechen. Dies ist auf jeden fall der schnellste Weg ein Element anzusprechen. Der Zweitschnellste, ist dasder Selector $(‘tag’) über einen HTML Tag. Auch Kombiniert sind diese beiden sehr schnell.

var bereich = $('#container');
var link = bereich.find('a');
var tabelle = bereich.find('table');

Ich habe vor ein par Wochen ein kleines Plugin für jQuery geschrieben, welches mir schnell und einfach ermöglicht einen Bereich zu Markieren in welchem gerade etwas geladen wird. Es ist bisher nichts spezielles und wurde eigendlich auch nur für mich geschrieben. Ein Kollege von mir meinte aber bereits auch, dass er dieses Plugin gerne einsetzten würde und so dachte ich mir ich kann es gleich allen zur Verfügung stellen. Ihr könnt es ganz einfach im Downloadbereich herunterladen.

Zu bedienen ist es relativ einfach und lässt sich mit einem kurzen Start und Stop befehl steuern.

// Starten
$('selector').loadAnimation();  

// Stoppen
$.loadAnimation.end();

Zudem kann die Animation auch ein wenig dem Layout angepasst werden in dem man die Farbe, Transparenz, zIndex und ein Bild in der Mitte anzeigt. Ebenso kann man die Geschwindikeit steuren in der die Animation ein- und ausgeblendet wird.

var options = {
// Ein- / Ausblenden
loadSpeed: 'slow',
closeSpeed: 'fast',

// CSS Otionen
zIndex: 998,
opacity: 0.9,

// Farbe
color: '#ccc',

// Bild in der Mitte
image: {
src: '',
alt: 'loading...',

// Grösse des Bildes wird benötigt um das Bild schön
// in der Mitte darzustellen.
size: {
width: 100,
height: 10
}
}
};

// Animation mit Optionenen Starten
$('selector').loadAnimation(options);

Also viel Spass damit… Wenn ihr Fragen habt oder Bugs gefunden habt, schreibt dies einfach in die Kommentare.