Question

我有一个卡列表，通过循环访问服务器上的一组JSON数据来填充。你可以想象，这需要一点时间，我想在元素加载时显示一个小的加载条屏幕。

我当然可以使用document.ready或onload函数，但页面上的其他元素几乎瞬间加载，我想显示此div，而其他元素已经加载。当然使用timeOut并不准确。似乎可能的解决方案是使用observeMutation()，但我不确定如何实现它。

我有一个if if语句，但它没有用。

更新：使用来自Firebase实时服务器的snapshot()不使用AJAX。

HTML：

<!--ROUTINE CARDS-->
<!--THIS IS WHERE THE CARDS GET APPENDED-->
<ul id="cardList" class="cards">
</ul>

<!--LOADING SCREEN-->
<div id="loading">
  <h1>LOADING BAR OR SOMETHING</h1>
</div>

JavaScript（jQuery）

// Remove loading screen.
  checkList();

  function checkList()
  {
    if($(".card").is(":visible"))) // ".card" is the class of the elements that get appended to the ".cards" list.
    {
      $("#loading").hide();
    }
    else
    {
      setTimeout(checkList, 50);
    }
  }

Answer 1

假设您正在使用AJAX加载卡片，您应该只需加载初始状态页面并将hide方法绑定到成功回调。

$.ajax({
  url: "your url",
  context: document.body
}).done(function() {
  $("#loading").hide();
  // Other stuff
});

Answer 2

课堂上有拼写错误。使用.cards代替.card。希望这会奏效。

将填充显示div直到列表

2 个答案: