javascript - "please wait"的动画未使用 jQuery 加载

Question

我得到这张图片是为了告诉人们一些 Action 正在加载:http://problemio.com/img/ajax-loader.gif

然后我将这个 div 放在我的页面上以显示它:

<div id="loading">
  <p><img src="/img/ajax-loader.gif" /> Please Wait</p>
</div>

然后我为它添加了这个 css:

#loading 
{ 
    display:none; 
}

然后在我的 jQuery 中我这样做:

$("#loading").show();

但它只是不渲染。知道我做错了什么以及为什么它没有出现吗？

这是一个应该发生这种情况的页面示例:http://www.problemio.com/problems/problem.php?problem_id=216

谢谢!

Answer 1

在 Google Chrome 上测试(通过在开发人员控制台上运行 $("#loading").show();)似乎工作正常。

会不会是元素放在了页面的底部而你只是看不到它出现？

如果这是问题所在，请尝试在您的 css 上应用以下样式

#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #fff;
  border: 1px solid #aaa;
  padding:0 20px;
}

此外，您可能应该将 block 外观的逻辑更改为以下内容

• 当用户单击触发 ajax 调用的链接时立即显示加载程序
• 进行ajax调用
• Ajax 调用完成(错误或成功)
• 隐藏加载div

• 继续错误/成功处理程序

  $('#add_attempted_solution').bind('submit',function() {
  
  // pre ajax call code
  
  $("#loading").show();
  $.ajax({
      type: "POST",
      url: "/auth/check_login.php",
      dataType: "json",
      success: function(data) {
          $("#loading").hide();
  
          // success handling
          ......
          ....
      },
      ...
      error: function() {
          $("#loading").hide();
  
          // error handling
          ....
          ...
      }
      ...
  })