是否显示正在加载的动画直到出现<div>？

Question

我正在运行一个异步的第三方脚本，该脚本将一个图片库加载到我的页面中，但不幸的是，它们的代码在它们的图片库加载完成后没有为我提供回调。

模式是这样开始的：

<div class="modal-body">
  <div class="container-fluid" id="cincopa">

  </div>
</div>

加载图库后，模式如下所示：

<div class="modal-body">
  <div class="container-fluid" id="cincopa">
    <div id="ze_galleria">
       //gallery stuff
    </div>
  </div>
</div>

所以我需要一些方法来显示一个加载动画，直到#ze_galleria出现。加载动画功能我可以自己做，但是jQuery中有什么东西可以在创建某个DOM元素时监听吗？一旦DOM元素出现，它将运行回调来删除动画。

Answer 1

根据该脚本添加库/库项目的方式，您可以使用DOMSubtreeModified事件，然后检查是否添加了该特定项目

document.addEventListener("DOMSubtreeModified", function(e) {

    if (document.querySelector("#ze_galleria")) {

        // exists

    }

});

这是一个DOM树事件列表，您可以在其中检查可能使用的其他可能事件。

• https://developer.mozilla.org/en-US/docs/Web/Events

更新

确保你也看看MutationObserver，因为它现在有非常好的浏览器支持。

• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

此外，您还可以设置间隔：

var cincopa = $('#cincopa');
var counter = 0;
var intervalCode = setInterval(function(){
    if (cincopa.find('#ze_galleria').length){
        clearInterval(intervalCode);
        yourCallback();
    }
    counter++;
    console.log(counter + ' seconds past till the event loaded.');
}, 1000);

我认为代码很直观，但如果有任何疑问，只需问:)

Answer 3

假设您的“第三方库”将完全覆盖您所指向的任何内容(正如您的示例代码所暗示的那样)。您只需添加img即可解决问题：

<div class="modal-body">
   <div class="container-fluid" id="cincopa">
     <img src="loading.gif"/>
   </div>
</div>

当库完成它需要做的事情时，它将覆盖div <div class="container-fluid" id="cincopa">的内容，结果是：

<div class="modal-body">
  <div class="container-fluid" id="cincopa">
    <div id="ze_galleria">
       //gallery stuff
    </div>
  </div>
</div>

从而删除您的加载映像。