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

假设您的第三方图书馆＆＃34;将完全覆盖你指出的内容（正如你的示例代码所暗示的那样）。您只需添加img：

即可解决问题

UITableView

当库完成了它需要做的事情时，它将覆盖div <div class="modal-body"> <div class="container-fluid" id="cincopa"> <img src="loading.gif"/> </div> </div>的内容，从而导致：

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

因此删除了您的加载图片。

显示加载动画，直到出现<div>？

3 个答案: