Question

我需要在点击按钮（MVC剃刀视图）时显示旋转轮，直到页面加载完成。我想通过jQuery实现这一点，而不是通过AJAX。

我的桌子位于下方 -

$(document).ready(function () {
    $('#btnSubmit').click(function () {       
        $("#btnSubmit").prop("disabled", true);
        $('#load').show();            
    });       
});

//$(window).load(function () {
//    setTimeout(function () { $('#load').hide() }, 5000);
//});

$(document).ready(function (){
     setTimeout(function () { $('#load').hide() }, 5000);
});

我的jQuery如下：

{{1}}

现在这个功能在IE和Firefox中正常运行，但在Chrome中却没有。在chrome页面中没有提交并显示加载图像。我知道Window Load与chrome不兼容，这就是为什么我评论并试图在文档准备好时实现的原因。有什么想法吗？

Answer 1

在click事件中移动setTimeout，如下所示：

$(document).ready(function () {
    $('#btnSubmit').click(function () {       
        $("#btnSubmit").prop("disabled", true);
        $('#load').show();
        setTimeout(function () { $('#load').hide() }, 5000);
    });       
});

此功能将显示#load元素，然后在您单击以再次隐藏它后等待5秒。

$(document).ready(function () {
    $('#btnSubmit').click(function () {       
        $("#btnSubmit").prop("disabled", true);
        $('#load').show();
        setTimeout(function () { $('#load').hide() }, 5000);
    });       
});

#load {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="load">Loading...</p>
<button id="btnSubmit">Submit</button>

Answer 2

我知道Window Load与chrome不兼容

它肯定是:)并且你的代码是正确的，这有点令人困惑:)。＆＃34;文档就绪＆＃34;，在窗口加载之前调用，这将解释您所看到的行为。

$(window).load(function () {
    setTimeout(function () { $('#load').hide() }, 5000);
});

这会隐藏一个div，其中包含＆＃34; load＆＃34; 5秒后。如果没有发生这种情况，您的页面上会有其他代码影响它。有错误吗？

由于Jquery功能，页面未在Chrome中提交，而在Firefox中正在使用

2 个答案: