單擊按鈕時不顯示我的loading.gif

Question

每當我的按鈕單擊時，我都試圖創建一個加載屏幕，它會執行Ajax和所有內容，但不會執行加載屏幕。

的CSS

<style>
#display_loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}
</style>

jQuery的

$("#submit-btn").click(function(){
  //$('#loading').show();
  $("#display_loading").html('<img src="C:\Users\jmdsantos\Loading_icon.gif" height="100px" width="100px">')

下面是通過Ajax關閉正在加載的GIF的信息。

$("#display_loading").html('')

我哪里做錯了？

Answer 1

檢查您的圖像路徑，它不應該是E＆C兩個驅動器

E：C：\\ Users \\ jmdsantos \\ Loading_icon.gif

如果您位於jmdsantos文件夾中，則僅使用Loading_icon.gif。

Answer 2

您的圖片標簽有誤。 它不應該那樣放。

最好使用css按ID或任何類隱藏圖像，然后在單擊功能上顯示它。

 $("#submit-btn").click(function(){ $("#display_loading").show(); }); 

  #display_loading{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="display_loading"><img src="/path to/jmdsantos/Loading_icon.gif" height="100px" width="100px"></div> <button id="submit-btn">to click</button>