Google Web Designer: Checking if initAd() has finished loading

Question

I'm trying to dynamically change images on an ad unit that's been created with GWD.

I have a JSON feed that is called after initAd() has been called in the handleWebComponentsReady() function.

Locally this works fine, the ad initializes and then the ajax call is made to retrieve a list of assets, I then use jQuery to swap out the image src to the new images.

After deploying to a live server though, it won't work, it looks like the initAd() function takes significantly longer to load which is having the knock on effect of jQuery not being able to find the img tags to manipulate.

I've tried placing my ajax call inside the handleAdInitialized() event which is meant to be called after the ad has been initialized but before the ad itself has been rendered but this doesn't seem to be the case.

I've also tried adding a timeout on the ajax call to wait a couple of seconds before making the changes which works but isn't ideal.

Here is a sample of my feed, it's very simple

{
   image1: "assets/img1.jpg",
   image2: "assets/img2.png",
   image3: "assets/img3.png",
   image4: "assets/img4.png",
   image5: "assets/img5.png"
}

And here are the events

function handleWebComponentsReady(event) {
    // Start the Ad lifecycle.

    setTimeout(function() {
      gwdAd.initAd();
    }, 0);


  }

  /**
   * Handles the event that is dispatched after the Ad has been
   * initialized and before the default page of the Ad is shown.
   */
  function handleAdInitialized(event) {
    $.ajax({
        url: "link-to-feed",
        jsonpCallback: "callback",
        dataType: "jsonp",
        async: false,
        success: function( response ) {
          console.log(response);

          $('#img1').css('background-image','url("' + response.image1 + '")');
          $('#img2').css('background-image','url("' + response.image2 + '")');
          $('#img3').css('background-image','url("' + response.image3 + '")');
          $('#img4').css('background-image','url("' + response.image4 + '")');
          $('#img5').css('background-image','url("' + response.image5 + '")');

        },
        error: function(response){
          console.log("error");
        }
    });
  }

Is there a way to detect when initAd() has fully finished and then call my ajax?

Any help would be appreciated.

Thanks

Answer 1

what about putting while case to check if response.image1,response.image2 .. are null , if so then wait until there values are ready

while (response.image1 == null  && response.image2 == null && response.image3 == null && response.image4 == null) {};

after there values are sit then

$('#img1').css('background-image','url("' + response.image1 + '")');
          $('#img2').css('background-image','url("' + response.image2 + '")');
          $('#img3').css('background-image','url("' + response.image3 + '")');
          $('#img4').css('background-image','url("' + response.image4 + '")');
          $('#img5').css('background-image','url("' + response.image5 + '")');

Answer 2

I'm not sure if this is what you want, but gwdAd.initAd() is the function that dispatches the "adinitialized" -event on the document.

   var onGWDAdInit = function(){
     console.log("The ad has initialized");
   }

   document.addEventListener("adinitialized",onGWDAdInit,false);