使用Ajax請求加載GIF

Question

$(".content-short").click(function() { 
     var ID = $(this).attr('data-id'); 
     $('.loadingmessage').show(); 
     $.ajax({ 
      type: "post", 
      url: "collegeselect.php", 
      data: 'ID=' + ID, 
      dataType: "text",     
      success: function(response){      
       $(".content-full").html(response); 
       $('.loadingmessage').hide(); 
      } 
     }); 
    }); 

//collegeselect.php//是用於從數據庫加載數據，//.loadingmessage//爲GIF

當我使用這個首次它顯示GIF ，但是在第一次點擊後不會顯示gif，因爲檢索到的數據已經可以在前一個ajax請求的內容中獲得， 如何在每次點擊內容短片時顯示它？

Answer 1

發生這種情況是因爲您正在用您的響應加載GIF圖像來替換實際內容。

所以，當你點擊第一次顯示和ajax調用成功後，你已經取代了.content-full的內容，並且沒有可用的GIF。

解決方案：要解決或者與響應發送相同的圖像標籤或移出裝載機像側的.content-full。

Answer 2

添加beforeSend : function()在您的請求成功之前。

嘗試

$(".content-short").live(function() { 
     var ID = $(this).attr('data-id'); 
     $('.loadingmessage').show(); 
     $.ajax({ 
      type: "post", 
      url: "collegeselect.php", 
      data: 'ID=' + ID, 
      dataType: "text", 
      beforeSend : function() 
      { 
      $('.loadingmessage').show(); 
      }, 
      success: function(response){      
       $(".content-full").html(response); 
       $('.loadingmessage').hide(); 
      } 
     }); 
    }); 

Answer 3

從評論，我收集了img是.content-full容器內。問題是因爲你在做$(".content-full").html()，所以當ajax成功時，img被刪除。解決這個問題的一種方法是將img移出容器。另一種方法是存儲對img的引用，並將其與.append()或.prepend()的響應一起添加回來，如下所示。

$(".content-short").click(function() { 

    var ID = $(this).attr('data-id'); 
    $('.loadingmessage').show(); 

    $.ajax({ 
     type: "post", 
     url: "collegeselect.php", 
     data: 'ID=' + ID, 
     dataType: "text",     
     success: function(response) { 

      var $content = $(".content-full"); 
      var $loaderImg = $content.find('.loadingmessage').hide(); 
      $content.html(response).prepend($loaderImg); 
     } 
    }); 
}); 

這裏是a demo模仿直通setTimeout行爲。