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中返回零（无法检查旧版本），因此您可以在此处使用window对象替换this对象：

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

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

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

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

1 个答案: