我該如何創建一個Ajax Loading視圖

我已經看過這個過程很多次了，但是當我去看這個時候，似乎沒有一個簡單的方法，或者至少一個網站告訴我它在做什麼以及爲什麼。我該如何創建一個Ajax Loading視圖

理想情況下，我想要做的是創建一個容器（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」隱藏和「加載」顯示？因此，加載類佔用與「實際」形式相同的空間。想象一下，它與改變z索引有關。我很確定這是CSS問題。我使用jQuery的$（「。classname1」）。hide（）/ $（「。classname2」）。show（）但我遇到的問題是div縮小。

我在創建的jsfiddle項目：http://jsfiddle.net/aHW33/ （在那裏的HTML代碼是不同的，那麼這裏顯示的擴展版本）

來源

2013-10-28 DanScan

[jQue ry「請稍等，正在加載...」動畫？]（http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation） –

您是否試圖避免指定'height'和'width '去集裝箱班？如果你遇到的問題是div縮小，那是最簡單的解決方案。 – rogMaHall

這裏有一個更新的小提琴，這將淡出你的形式，和淡入按鈕。

基本上，該行：

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

意味着它將首先淡出形式，等待它完成，然後淡入加載GIF。

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

來源

2013-10-28 15:33:27 SidOfc

雖然這是類似於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(); 
      }); 
     }

來源

2013-10-28 16:33:24 DanScan

您應該下面的代碼中使用：

$(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-05 13:29:21

我該如何創建一個Ajax Loading視圖

回答

相關問題