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

Question

I'm running an asynchronous 3rd party script that loads an image gallery into my page, but unfortunately their code doesn't provide me with a callback after their image gallery has finished loading.

The modal starts off like this:

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

  </div>
</div>

After the gallery is loaded, the modal looks like this:

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

So I need some way to display a loading animation until #ze_galleria appears. The loading animation function I can do myself, but is there something in jQuery that will listen for when a certain DOM element is created? Once the DOM element appears, it'll run the callback to remove the animation.

Answer 1

Based on how that script adds the gallery/gallery items you could use the DOMSubtreeModified event and then check if that particular item were added

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

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

        // exists

    }

});

Here is a DOM tree event list, where you can check other possible events that might could be used.

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

Update

Make sure you take a look at the MutationObserver as well, as it has very good browser support nowadays.

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

Answer 2

Also, you can set an interval:

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

I think the code is intuitive, but if there is any doubt, just ask :)

Answer 3

Presuming that your "3rd party library" is going to totally overwrite the contents of what ever you point it at (as your example code suggests it does). You can solve your problem simply by adding an img:

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

When the library has done what it needs to do it will overwrite the contents of the div <div class="container-fluid" id="cincopa"> resulting in:

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

thus removing your loading image.