2

Есть несколько вкладок с большим количеством картинок. Идея состоит в том, чтобы загружать картинки только текущей вкладки. Для вкладок я использую Jquery UI, для картинок lazyload метод. Подгружаю картинки только текущей вкладки следующим образом:

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

Некоторые вкладки содержат в себе до 750 картинок. Поэтому возник вопрос - как остановить загрузку текущей вкладки, если была нажата другая вкладка и начать немедленную загрузку картинок из нажатой вкладки?

2 ответа 2

1

При переключении в следующий таб у всех картинок этого таба сбросьте src.

Загруженные картинки останутся в кэше, так что вы по идее ничего не теряете.

Когда вы в следующий раз переключитесь на этот таб, src снова установятся, и картинки, которые есть в кэше, сразу загрузятся. Остальные будут грузиться из сети.

ЗЫ: я не спец по js, код не напишу, сорри.

Наверное, что-то вроде

$("#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);
         });
     }
});

(сильно не пинайте!)

1

Спасибо! В итоге пришел к такому решению:

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

UPD похоже, что можно получить доступ к последней вкладке и ее содержимому с помощью ui.oldTab и ui.oldPanel, тогда:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.