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.
Heute ist der erste Release Candidate vom jQuery Plugin qTip rausgekommen. Es ermöglicht einem auf einfache Art und Weise coole Tooltips zu bauen ohne dafür grossen Aufwand betreiben zu müssen. Es bieted aber nicht nur die Möglichkeit einfach und schnell Tooltips zu erstellen sondern erlaubt es auch duch die API Schnittstelle die Funktionalität vollkommen zu dynamisieren oder auch erweitern.
// Einfaches Tooltip über alle Links
$('a').qtip({ content: 'Mein Tooltip' });
// Tooltip mit dynamischen Inhalt
$("#dynamisches_tooltip").qtip({
content: {
url: 'localcontent.html'
}
});
Man kann die Tooltips aber auch nach belieben gestalten über das style Attribut:
$("gestyltes_tooltip").qtip({
content: 'Dieses Tooltip ist hübsch',
style: {
width: 500,
padding: 5,
background: '#ccc',
color: 'black',
textAlign: 'center',
border: {
width: 7,
radius: 2,
color: '#fff'
}
}
});
Es gibt aber auch vorgefertigste Styles, welche man einfach über style.name aktivieren kann und man nur noch gewisse kleinigkeiten anpassen/überschreiben muss.
Zudem bieted das API Attribut diverse Callbacks welche man erstellen kann. Ein keines Beispiel:
$('#api_funktionen').qtip({
content: 'mein Inhalt',
api: {
onFocus: function ()
{
// Bei Mousover färbt sicht das Element rot
this.css('color','red');
}
}
})
Alles in allem ein sehr gelungenes Plugin mit vielen Möglichkeiten es zu erweitern. Zudem steht der Ersteller im Forum aktiv zur Rede und Antwort.
