Jquery Вкладки загрузки GIF

Question

У меня есть мои закладки определяются следующим образом -

$(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function (event, ui) { 
       var tab = $(ui.tab); 

       if (tab.is(":empty")) { 
        tab.append(" <div class='loadinggiftabs' ><img src='./Content/graphics/loading.gif' /></div>") 
       } 

       alert('before'); 
      }, 
      load: function (event, ui) { 
       $(ui.tab).find(".loadinggiftabs").remove(); 
       alert('after'); 
      } 
     }); 
    }); 

Вопрос заключается в том, что загрузка GIF loadinggiftabs никогда не кажется, чтобы получить прилагается (и, следовательно, удалены). Уведомления вызываются. В соответствии с инструментами Chrome dev нет JS-ошибок. Я также попытался добавить к ui.panel вместо ui.tab

Спасибо.

Answer 1

here's еще один способ решить, что

<div id="spinner" style="display:none;"><img src="/Images/loading.gif" /></div> 


<script> 
$(document).ready(function(){ 
    $("#spinner").bind("ajaxSend", function() { 
     $(this).show(); 
    }).bind("ajaxStop", function() { 
     $(this).hide(); 
    }).bind("ajaxError", function() { 
     $(this).hide(); 
    }); 
}); 
</script> 

Answer 2

У меня были похожие проблемы. Мне потребовалось много времени, чтобы найти что-то работающее. Теперь это мое рабочее решение.

Извещение, оно также кэширует. Эта if-construct необходима для работы кеширования, иначе она все время перезагружается.

$(function() { 
    $("#tabs").tabs({ 
     cache: true, 
     /* Probably won't need this object, it's just to appease jsfiddle */ 
     ajaxOptions: {}, 

     beforeLoad: function (event, ui) { 
      if ($(ui.panel).html()) { 
       event.preventDefault() 
       return false; 
      } 
      else { 
       ui.panel.html('<div><img src="/Images/loading.gif" /></div>'); 
       return true; 
      } 
     } 
    }); 
});