使用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在現代瀏覽器中失敗，爲什麼您不使用它直接設置路徑？