Im Quelltext sind Tabs ja nichts anderes als:
jQuery UI TabsProin elit arcu, rutrum commodo, ....
![]()
![]()
Morbi tincidunt, dui sit amet faci....
![]()
![]()
Duis cursus. Maecenas....
![]()
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.