动画“请稍等”使用jQuery加载

Animation for "please wait" isn't loading with jQuery

本文关键字：使用 jQuery 加载 请稍等 动画      更新时间：2023-09-26

我得到这个图像是为了告诉人们一些动作正在加载: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

谢谢!

在Google chrome上测试(运行$("#loading").show();在开发者控制台)似乎工作得很好。

会不会是这个元素被放置在页面的底部，而你没有看到它出现呢?

如果这是问题，尝试应用以下样式在你的css

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

你也可能应该改变逻辑块的外观为以下

  • 当用户单击触发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
        ....
        ...
    }
    ...
})

    }

您的代码中有一个问题。如果你在浏览器的地址栏中输入javascript:$("#loading").show();，它会显示div fine。将你的JS代码移到文档的底部(在结束正文标签之前)，确保你在必要的地方有分号(我看到一些缺失)，三次检查你的代码。

更具体地说，对/auth/check_login.php的AJAX请求没有触发成功回调，请尝试使用完整回调。

相关文章：