Search code examples
jqueryjquery-uitabslazy-loadingjquery-ui-tabs

Jquery UI last clicked tab


I have a few tabs with images. The idea is to show images only from the clicked tab, something like this:

$("#tabs").tabs({ show: function(event, ui) {
$('img.lazy', ui.panel).each(function(){ var imageSrc = $(this).attr("data-original-src"); $(this).attr("src", imageSrc); }); } });

But some tabs have almost 750 images. How can I stop dowload images from old tab if new tab is clicked? I think it should be something like this:

$("#tabs").tabs({
 show: function(event, ui) {
     if (oldui != null) {
         $('img.lazy', oldui.panel).each(function() { 
             $(this).attr("src", "");
         });
     }
     oldui = ui;
     $('img.lazy', ui.panel).each(function() {
         var imageSrc = $(this).attr("data-original-src");
         $(this).attr("src", imageSrc);
     });
 }

});

but how can I get last clicked tab?


Solution

  • ui.index is the current one, store this in variable on show method:

    var prevTab = 0;
    $("#tabs").tabs({
     show: function(event, ui) {
         if(prevTab != ui.index) {
           //do it here....
         }
         prevTab = ui.index; 
        }
    });