1

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.

Marcus
  • 822
  • 1
  • 8
  • 27
fuzzybabybunny
  • 5,146
  • 6
  • 32
  • 58
  • Put the image in the markup, you'll need a call back (if the 3rd party script provides one) to remove the image once it's loaded, simples. If you have no callback from the third party script your screwed – Liam Mar 15 '16 at 15:57
  • Actually, does the script replace the contents of `#cincopa`? If yes, just put and img tag in this and wait for the library to overwrite it – Liam Mar 15 '16 at 15:58
  • 1
    Possible duplicate of [Is there a jQuery DOM change listener?](http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener) – Dave Mar 15 '16 at 16:00
  • @dave I'm a little wary of using Mutation Observers since it has some browser compatibility issues. But my project is a Meteor app so maybe I shouldn't care. – fuzzybabybunny Mar 15 '16 at 16:20

3 Answers3

2

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.

Update

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

Asons
  • 84,923
  • 12
  • 110
  • 165
1

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

  • But you have no idea how long to wait for, I wouldn't recommend this approach. It's either not going to work well or be inefficient (waiting needlessly) – Liam Mar 15 '16 at 16:08
  • @Liam.. I like this way because if some users have low internet conection, you can simple do another if, for example, if counter > 15, block some features, so the user can have a better experience with low internet access. –  Mar 15 '16 at 16:12
1

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.

Liam
  • 27,717
  • 28
  • 128
  • 190