Samstag, 16. Juni 2012

jQuery lazyload mit jQuery UI Tabs

Bei der Anzeige von vielen Bildern ist es sinnvoll, die Bilder erst zu laden wenn sie in den sichtbaren Bereich kommen. Dazu empfiehlt sich die Verwendung des lazyload Plugins für jQuery. Allerdings habe ich gerade feststellen müssen, dass in Kombination mit jQuery-Tabs ein Problem auftritt.
Im Quelltext sind Tabs ja nichts anderes als:

Proin elit arcu, rutrum commodo, ....

Morbi tincidunt, dui sit amet faci....

Duis cursus. Maecenas....

jQuery UI Tabs
lazyload Bilder:
 $('.Image img').lazyload();
Wird nun von #tabs-1 auf #tabs-2 gewechselt, passiert nichts anderes, als dass die Sichtbarkeit von #tabs-1 auf
.ui-tabs .ui-tabs-hide {
 display: none !important;
}
gesetzt wird und #tabs-2 die entsprechende css Klasse entzogen wird. Dadurch fehlt aber das passende Event für lazyload (es wird ja nicht gescrollt) und die Bilder auf #tabs-2 werden erst nach kurzem scrollem geladen.
Dieses Verhalten ist für den Benutzer sehr unschön. Eine mögliche Lösung um dieses Verhalten zu umgehen ist, auf das show-Event der Tabs zu reagieren und das scroll-Event manuell auszulösen.
 //initialisieren der Tabs:
 $('#tabs').tabs({
  show: function(event, ui) {
   $(window).scroll();
  }
 });
Lazyload reagiert nun auf dieses Event und lädt die Bilder die sich im sichtbaren Bereich befinden.

Freitag, 15. Juni 2012

JSLint Meldungen

Dieser erste Eintrag soll die Meldungen von JSLint kurz mit einem Bespiel erläutern.
Meldung: This is better written in dot notation.
Beispiel:
 meinArray['Name'] = 'Manuel';
Lösung:
 meinArray.Name = 'Manuel';
Anmerkung:
Ob es tatsächlich schneller ist konnte ich bislang nicht feststellen, aber sicherlich erhöht sich die Lesbarkeit.
jslint wiki
Meldung: Use the array literal notation [].
Beispiel:
 var meinArray = new Array();
Lösung:
 var meinArray = [];
Diskussion auf Stackoverflow
Meldung: Use the object literal notation {}.
Beispiel:
 var meinObject = new Object();
Lösung:
 var meinObject = {};
Diskussion auf Stackoverflow