如何显示加载...直到整个向导加载到 jQuery-steps 插件中？答案

【问题标题】：How to show loading... until whole wizard loads in jQuery-steps plugin?如何显示加载...直到整个向导加载到 jQuery-steps 插件中？
【发布时间】：2015-12-30 12:57:23
【问题描述】：

我正在为我的向导类型表单使用 jQuery-steps 插件。我想显示加载...动画，直到整个向导完全加载。插件中为此提供了标签。我只是不知道如何启用它。

你猜到了吗？

编辑：

这是我生成向导表单的代码

$(function () {
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "form",
        saveState: true,
        transitionEffect: "slideLeft",
        onStepChanging: function stepChange(event, currentIndex, newIndex) {
            if (currentIndex > newIndex) {
                for(i=currentIndex;i>0;i--){
                    $("#sec"+i+"override").val(true);
                }
                return true;
            }

            e=event;
            ci=currentIndex;
            ni=newIndex;
            var form = $('#wizard-p-'+currentIndex);
            form.validate().settings.ignore = ":disabled,:hidden:not('.hiddenField')";
            var res = form.valid();
            if(res) {
                var ress = form.submit();
                if(check) {
                    return true ;   
                } else {
                    popup();  
                }
            }
        },
        onFinishing: function(event, currentIndex) {
            ci=currentIndex;
            var form = $('#wizard-p-'+currentIndex);
            form.validate().settings.ignore = ":disabled,:hidden:not('.hiddenField')";
            var res = form.valid();
            if(res) {
                var ress = form.submit();
                if(check) {
                    return true;    
                } else {
                    popup();
                }
            }
        },
        onFinished: function(event, currentIndex) {
            <%
            UserDTO user = UserUtils.getLoggedInUser();
            if(user!=null){
                if(user.getIsAdmin()){
                    %>    
                        window.location = "<%=application.getContextPath()%>/projects"; 
                    <%     
                } else {
                    %>            
                    window.location = "<%=application.getContextPath()%>/home";
                    <%    
                }
            }
            %>
            $.cookie('jQu3ry_5teps_St@te_' + $( this ).data( "uid" ), '' );
        }
    });
});

现在问题是它可以完美运行，但是在加载整个表单时，它首先显示部分标题，然后再加载看起来不太好的表单。我只想显示加载...动画，直到整个表单加载为止。

【问题讨论】：

你为什么不提供你拥有的代码，也许创建一个fiddle，至少向我们展示你已经尝试过靠自己来完成这项任务。
添加了我的代码。请看一下。
我找不到，哪部分代码导致表单加载延迟。我可以给你的一个提示是，找出导致表单加载延迟的代码。在屏幕上拍摄图像，在表单加载之前显示该图像并在代码执行完成后将其隐藏..
是的，我知道这是可以做到的。但是 jquery-steps 插件已经提供了这个功能。我只是不知道如何启用它。必须为此设置一些属性。
看看这个例子（异步内容加载示例）。 - jquery-steps.com/Examples

标签： javascript jquery jsp jquery-plugins jquery-steps

【解决方案1】：

如果我正确理解了这个问题......表单在页面加载后加载了一点，导致用户在按步骤初始化表单之前查看表单。如果是这种情况，您可以添加一个包含加载动画的附加 div，并且在页面加载时不显示您的表单...

<div id="loadingIcon">
    <img src="images/loading.gif"/>
</div>
<div id="wizard" style="display: none;">
    <%-- FORM HERE --%>
</div>

然后在您的 onload 函数中，隐藏加载图标并显示表单。

$(function () {
    $("#wizard").steps({
        // Steps
    });
    $('#loadingIcon').hide();
    $('#wizard').show();
});

【讨论】：