使用JQuery显示异步请求的进度条

Question

我没有使用ProgressBar插件，而是使用下面的脚本来显示异步的进度条。页面上的请求。任何人都可以提供反馈，如果它是浏览器兼容的，等等。我上周在codereview上提出了这个问题，但没有得到任何回应，所以试试这里。

<div class="overlay"> 
    <div class="progress"> 
     <img src="@Url.Content("~/content/images/loading.gif")" />Loading... 
    </div> 
</div> 

//displays progress bar 
$('.overlay').ajaxStart(function() { 
     $(this).css({ height: $(document).height(), width: $(document).width() }).show(); 
     $(this).find(".progress").css({ top: $(window).height()/2, left: $(window).width()/2 }); 
     }).ajaxStop(function() { 
     $(this).hide(); 
}); 


.overlay 
{ 
    position: fixed !important; 
    position: absolute; /*ie6*/ 
    width: 100%; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    background-color: #000; 
    filter: alpha(opacity=20); 
    opacity: 0.2; 
    -moz-opacity: 0.2; 
    -khtml-opacity: 0.2; 
    -webkit-opacity: 0.2; 
    z-index: 10004; 
    display: none; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); /*ie6*/ 
} 
.overlay .progress 
{ 
    position: absolute; 
    z-index: 10005; 
    background: #fff; 
    color: #000; 
} 

Answer 1

jQuery的width和height功能在IE 7-9返回零（不能检查旧版本），所以你可能raplace window对象与this对象的位置：

$(this) 
    .find('.progress') 
    .css({ 
     top: $(this).height()/2 + 'px', 
     left: $(this).width()/2 + 'px' 
    }); 

您可以使用this用于计算，因为您的.overlay块具有窗口的宽度和高度。

此外，@Url.Content在现代浏览器中失败，为什么您不使用它直接设置路径？