微调不工作

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调用已经发生之后。您是否尝试过在ready函数中添加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(); 
});