Question

我似乎无法让这个微调器工作。任何帮助表示赞赏。我想在页面加载时显示它。

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px /* height of the spinner gif +2px to fix IE8 iss */
  }

<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="https://www.cmfgroup.com/images/list-graphics/loader.gif?       Status=Temp&sfvrsn=2" alt="Loading"/>
</div>

<script type="text/javascript">
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
    $(this).show();
}).bind("ajaxStop", function() {
    $(this).hide();
}).bind("ajaxError", function() {
    $(this).hide();
});

 });
</script>

页面正在加载

时不显示任何内容

Answer 1

在ajax调用已经发生之后，你可能会绑定它。您是否尝试过在准备好的函数中添加ajax微调器并查看脚本完成时它是否消失？

这样的事情：

<script type="text/javascript">
$(document).ready(function(){
    $("#spinner").show();
    $("#spinner").bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });
});
</script>

Answer 2

documentation说（强调原文）：

从jQuery 1.8开始，.ajaxSend（）方法只应附加到文档。

因此，你应该写：

$(document).ajaxSend(function() {
    $("#spinner").show();
}).ajaxStop(function() {
    $("#spinner").hide();
}).ajaxError(function() {
    $("#spinner").hide();
});

微调器不工作

2 个答案: