使用get（）加載頁面之前的圖像加載

Question

如何在加載期間顯示gif圖像？

我用get。

function getCurrentUrl() { 
    $(
     $.get(
      "page1.html", 
      function (data) { 
       $("#divReceptLoad").empty().append(data); 
      }, 
      'html' 
     ) 
    ); 
} 

比你非常多，如果你能幫助我:)

Answer 1

創建<img id="loading" src="..." style="display:none;" />則：

function getCurrentUrl() { 
    $('#loading').show(); //show it before sending the ajax request 
    $.get("page1.html", function (data) { 
     $('#loading').hide(); //hide in the callback 
     $("#divReceptLoad").empty().append(data); 
    },'html')); 
} 

隨意更多的樣式/定位添加到圖像和更換基本show/hide方法fadeIn/fadeOut,slideDown/slideUp或other effects如果你喜歡。

這裏有一個loading GIF generator和another以防你不想從Google圖片中獲取一個。

這裏是預製的nice collection。

Answer 2

function getCurrentUrl() { 
    $('#gif').fadeIn() // show the hidden gif 
    $.get("page1.html", function(data){ 
     $('#gif').hide() // hide it 
     $("#divReceptLoad").empty().append(data); 
    },'html')  
}