单击按钮时不显示我的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>