Question

我想添加一个加载或微调器消息，直到表单/服务器完成重新加载我如何检查并知道表单已完成加载以禁用微调器？

注意：提交表单后，更新的数据在服务器重新启动之前不可用，只有表单标题可见，同时更新重新启动和更改。目前我手动刷新页面，直到表格再次可用。

这是我的html和jquery片段和加载代码。我的加载代码无效。

加载邮件的代码

 $(document).ready(function() {
              $('<div id="loading">Loading...</div>')
                .insertBefore('#myform')
                .ajaxStart(function() {
                  $(this).show();
                }).ajaxStop(function() {
                  $(this).hide();
                });
            });

Answer 1

对于加载图像的最简单解决方案，您可以使用jquery插件prettyLoader。

然后，只需在DOM加载后初始化插件：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $.prettyLoader();
    });
</script>

然后，无论何时自动生成ajax请求，它都会显示加载图标。

更新表可以通过两种方式完成：您可以在ajax请求中加载HTML并简单地覆盖它：

$('#myTable').innerHtml = data;

或者您可以使用表数据返回json-object并将此数据放入表中。为此，我建议您使用某种Viewmodel，例如Knockout.js。

Answer 2

您可以将其添加到您的脚本中：

// to show the loading spinner

$("#loading").ajaxStart(function(){
    $('#loader').show();
});

// to hide the loading spinner

$("#loading").ajaxStop(function(){
    $('#loader').hide();
});

loader将是你的div，带有绝对定位的div元素，宽度和高度均为100％，中间有一个加载gif（如果你想要或者可能只是加载的文本消息，请等待......像这样）< / p>

如何使用jquery添加加载图像？

2 个答案: