, показывающий загрузку gif-файла во время загрузки страницы с использованием jquery

Question

Я использую JQuery.

У меня под jquery, который я использую, чтобы показать фрагмент страницы, он загружает фрагмент страницы во время загрузки главной страницы.

$(document).ready(function() 
{ 
     $(".load-fragment").each(function()   
     {   
      var $objThis = $(this); 
      var fname = $objThis.attr("href"); 
      var dynDivID = "divContent"+ $objThis.attr("id"); 
      var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function() 
      {    
       $(this).hide(); //Hiding all the newly created DIVs 

      });   
      newDiv.addClass('dynDiv'); //Adding CSS to newly created Dynamic Divs 

      $("#column2").append(newDiv); //adding new div in div column2 
     });  

     $(".load-fragment").click(function() 
     { 
      // load page on click 
      var $thiz = $(this); //making the current object 
      $thiz.attr("href", "#");   
      $(".tabs-nav li").removeClass("tabs-selected"); //removing the css from the li 
      $thiz.parent().addClass("tabs-selected"); //adding the selected class to the parent on click 
      $("#tabs-container").hide(); //playing with hide and show 
      $('.dynDiv').hide(); 
      $("#divContent" + $thiz.attr("id")).show(); 
     });  
}); 

Теперь я хочу показать load.gif, а jquery загружает страницу. Ниже приведен код, сделанный выше jquery, где я пытаюсь загрузить страницу.

var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function() 
       {    
        $(this).hide(); //Hiding all the newly created DIVs 

       }); 

Пожалуйста, предложите как-то загрузить фрагмент страницы.

Спасибо.

С наилучшими пожеланиями, MS

Answer 1

Если вы хотите, чтобы изображение было видно для всех фрагментов в то время как фрагмент загружается, просто добавьте его в элемент от начала:

var newDiv = 
    $("<div>").attr("id",dynDivID) 
    .load(fname + " #tabs-container",function() {    
    $(this).hide(); 
    }) 
    .addClass('dynDiv') 
    .append($('<img/>').attr({ src: 'loading.gif', alt: '' })); 
$("#column2").append(newDiv); 

Если вы хотите, изображение должно быть видимым только для фрагмента, который вы пытаетесь просмотреть во время его загрузки, добавить изображение и скрыть его с начала:

var newDiv = 
    $("<div>").attr("id",dynDivID) 
    .load(fname + " #tabs-container") 
    .hide() 
    .addClass('dynDiv') 
    .append($('<img/>').attr({ src: 'loading.gif', alt: '' })); 
$("#column2").append(newDiv);