0

I have a script that does 2 main things in a sequence:

  1. It pulls data from an XML file through a GET request, and it appends the result into the DOM.
  2. I have this "MacyJS" script which basically puts the content within a nicely calculated grid (a bit like Masonry).

My issue is that the first part is taking quite some time (I don't mind, it's meant for my own private use) to get the result and append it to the DOM. So that the "MacyJS" already ran before, and thus not rendering properly the HTML in a nice grid.

You can see I tried to put a delay for MacyJS, but of course this is not precise and doesn't always work in time, since the GET/append sometimes takes more than 1.5s.

How can I automatically run "MacyJS" only once the DOM has fully been updated with the new HTML/content ?

Thanks a lot for your help.

Code below for reference:

$(document).ready(function(){

       // THE FIRST SCRIPT
        var x=20; 
        
        $.get("my xml file here", function(data) {
            var $xml = $(data);
            $xml.find("item").each(function(i, val) { 
                
                var $this = $(this),
                    item = {
                        description: $this.find("description").text(),
                        guid: $this.find("guid").text()
                };
                
                $('#grid').append($('<div class="parsed appear"><a target="_blank" href="' +item.guid +'">' +item.description +'</a></div>'));
                
                return i<(x-1); 
            });
        });

       // THE SECOND SCRIPT
        setTimeout(function(){
          
          var macy = Macy({
              container: '#grid',
              margin: 20,
              columns: 4,
          });

        }, 1500);
      });
Bukowski
  • 1
  • Call it in the `$.get` callback right after all the appending is done – charlietfl Sep 28 '20 at 08:38
  • Does this answer your question? [jQuery: Detecting if browser is done rendering after append()](https://stackoverflow.com/questions/34944147/jquery-detecting-if-browser-is-done-rendering-after-append) – Michel Sep 28 '20 at 08:53
  • Charlietfl's solution works! Thanks a lot for the simple fix, didn't think of this. – Bukowski Sep 28 '20 at 08:55
  • @Michel I tried this but no satisfying result. Thanks though – Bukowski Sep 28 '20 at 08:56

0 Answers0