Question

加载CSS div后，进度条将被该CSS div替换。

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来保存所有内容。

首先我们加载“loading”div

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

//需要一些时间来获取要显示的数据的数据div来到这里

我们在显示数据div之前隐藏“loading”div

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

现在我们将Data div附加到mainContainer

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

多数民众赞成。

Answer 1

您可以在初始点将初始显示属性设置为none以隐藏div，并在加载数据时删除隐藏css类，使用jQuery removeClass()方法，如下所示：

<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>

并编辑问题，以便每个人都能理解您的问题

在加载CSS div之前会添加进度条的JavaScript？

1 个答案: