0

我已经多次看到这样做了，但是当我去查找时，似乎不是一个简单的方法，或者至少是一个网站告诉我它在做什么以及为什么。

理想情况下，我想做的是创建一个容器（div），其中既有装载，也有实际形式。

<div id="mycontainer" class="container">
    <div class="loading">//Image of a loading gif or message
        <div>
            <div class="myactualform">
                <input id="firstname" />
                <input id="btnSend" type="button" />
            </div>
        </div>

我的问题是如何让“myactualform”隐藏和“加载”显示？因此，加载类占用的空间与“myactualform”占用的空间相同。想象一下它与改变z-indexs 有关。我很确定这是 CSS 问题。

注意：
我使用了$(".classname1").hide()/$(".classname2").show()来自 jQuery，但我遇到的问题是 div 缩小了。

我在以下位置创建了一个 jsfiddle 项目：http: //jsfiddle.net/aHW33/ （其中的 HTML 代码与此处不同，以显示扩展版本）

4

3 回答 3

1

这是一个更新的小提琴，它将淡出您的表单，并淡入按钮。

基本上，这些行：

  $(".formstuff").fadeOut().promise().done(function() {
      $('.loading').fadeIn();
  });

表示它会先fadeOut表单，等待它完成，然后fadeIn加载gif。

http://jsfiddle.net/aHW33/1/

于 2013-10-28T15:33:27.253 回答
0

虽然这类似于如何使用 jQuery 创建“请稍候，正在加载...”动画？

我一直在寻找的是将其转储到加载件运行的容器中。而不是整个页面模式。

因此，回答我的问题，rogMaHall 帮助我询问了有关高度和宽度的问题。

我的整体解决方案如下：

html:

            <div id="testit">
                <div style="display: none;" class="loading">
                    My loading message
                </div>
                <div class="formstuff">
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="button" id="showhide" />
                </div>
            </div>
            <p>This text should not move</p>

还有我的javascript（我认为可以缩短）

       $(document).ready(function(){
           $(".loading").hide();
           $("#showhide").click(function(){
              nowLoading();
         });
       });
       //Call these in your Ajax beforeSend
       function nowLoading(){
          //Get the original height and width of the container with the form (rogMaHall thanks)
           $(".loading").height($(".loading").parent().height());
           $(".loading").width($(".loading").parent().width());
           //I liked this technique from Sidney Liebrand (it answers a different question I have not asked yet
           $(".formstuff").fadeOut().promise().done(function() {
              $('.loading').fadeIn();
           });
           return false;
       }
       //Call this after Ajax returns (success, error, finished)
       function loadingComplete(){
           $(".loading").fadeOut().promise().done(function() {
              $('.formstuff').fadeIn();
           });
       }
于 2013-10-28T16:33:24.197 回答
0

您应该使用以下代码：

    $(document).ajaxStart(function () {           
        PageLoadWorkerStart();
    });
    $(document).ajaxStop(function () {
        PageLoadWorkerEnd();
    });        

    function PageLoadWorkerStart() {
        $("#PageLoader").css("display", "block");
        $("#LoaderWrapper").css("display", "block");
    }
    function PageLoadWorkerEnd() {
        $("#PageLoader").css("display", "none");
        $("#LoaderWrapper").css("display", "none");
    }
于 2013-11-05T13:29:21.373 回答