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?
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;
}
});