將在加載CSS div之前添加進度條的JavaScript？

-3

加載CSS div後，進度條將被該CSS div替換。將在加載CSS div之前添加進度條的JavaScript？

CSS div是一個動態的，它需要一些時間來獲取要顯示的數據，因此我想在加載CSS之前顯示一個加載欄。

<div id="'+levelDivId+'" class="mainContainerLevel" style="display:none"> 

<div class="nav-header-top"> 

// code which will be fetching my data 

</div>

我想

<div id="'+levelDivId+'" class="mainContainerLevel"> </div>

進度條會顯示爲2-3秒，然後這個div將顯示之前加載進度條。

我需要一個JavaScript來實現這一點。

請幫忙。

問題解決了，這是怎麼了：我們

必須持有一切mainContainer上股利。

首先，我們加載「加載」的div

$("#mainContainer").append("<div id='loading_MainMenu' class='mainContainerl' style='display: block;'> <p>Loading Data....</p> </div>");

//數據DIV這需要一些時間來獲取數據來顯示來這裏

我們之前隱藏的「加載」 DIV顯示數據的DIV

$("#loading_MainMenu").hide();

現在，我們追加數據的div mainContain呃

$("#mainContainer #"+DataDiv).append("</div> </div>");

完蛋了。

來源

2014-12-09 Kartik Rao

**你**問題中的**不必要**大膽部分**是什麼？ StackOverflow不是人們爲你寫代碼的地方;這是人們幫助您調試已編寫代碼的地方。 – 2014-12-09 11:47:57

你能顯示你的代碼嗎 – 2014-12-09 11:48:35

@RahulDesai我已經更新了我的問題。請幫忙 – 2014-12-09 12:06:42

您可以在初始點設置的初始顯示屬性設置爲無隱藏DIV和當數據被加載使用jQuery removeClass()方法類似這樣的刪除隱藏CSS類：

<html> 
    <head> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    </head> 
    <style> 
    .hide{ 
    display:none; 
    } 
    </style> 

    <div id="test" class="hide"> 

    <div> 
    <script> 
    $(document).ready(function(){ 
     //use your custom event and replace the name testEvent 
     $("#test").on('testEvent',function(){ 
      $("#test").removeClass('hide'); 
     }); 
    }); 
    </script> 

</html>

和編輯讓所有人都明白你的問題

來源

2014-12-09 12:11:33 Aminul

這很有幫助@Aminul，你可以幫助顯示一個進度條（加載欄），直到CSS div隱藏的時候？ – 2014-12-09 12:24:01

這裏是一個[示例]（http：// jsfiddle。net/saikotju/NAs3V/210 /）與jQuery和[jQuery UI]（http://jqueryui.com/）進度條自定義它來解決你的問題謝謝:) – Aminul 2014-12-10 04:51:03

將在加載CSS div之前添加進度條的JavaScript？

回答

相關問題