将在加载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？

回答

相关问题