Question

我得到了这张图片，告诉别人正在加载一些动作：http://problemio.com/img/ajax-loader.gif

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

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

然后我把它用于此：

#loading 
{ 
    display:none; 
}

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

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

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

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

谢谢！

Answer 1

在Google hrome上进行测试（通过在开发者控制台上运行$（“＃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
        ....
        ...
    }
    ...
})

}

Answer 2

您的代码中存在问题。如果您在浏览器地址栏中输入javascript:$("#loading").show();，则会显示div。将您的JS代码移动到文档的底部（在关闭正文标记之前），确保您在必要时使用分号（我已经看到一些遗漏），请检查您的代码。

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

“请等待”的动画未加载jQuery

2 个答案: