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.

Keine Kommentare:

Kommentar veröffentlichen