Question

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

理想情况下，我想要做的是创建一个容器（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-index有关。我很确定这是CSS问题。

注意：
我从jquery使用了$（“。classname1”）。hide（）/ $（“。classname2”）。show（），但我遇到的问题是div缩小了。

我在http://jsfiddle.net/aHW33/创建了一个jsfiddle项目（那里的html代码与此处不同，以显示扩展版本）

Answer 1

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

基本上，行：

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

意味着它将首先淡出表单，等待它完成，然后淡入加载gif。

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

Answer 2

虽然这类似于How can I create a "Please Wait, Loading..." animation using 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();
           });
       }

Answer 3

您应该使用以下代码：

    $(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");
    }

如何创建Ajax加载视图

3 个答案: