Search
Clear search
Close search
Google apps
Main menu

Using a default loading image

It's often useful to show an image while the rest of the ad loads, especially if the ad is fairly large.

To set up a loading image:

Add a div with the ID loading to the HTML:

<body style="visibility: hidden;">
   <div id="loading" class="loading-image">
       Loading...
   </div>
   <gwd-doubleclick id="gwd-ad" polite-load="">
  ...
  </gwd-doubleclick>
</body>

Then remove or hide the loading image in the AdInitialized handler.

To hide the loading image, use this function:

/**
 * 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) {
 // This marks the end of the polite load phase of the Ad. If a
 // loading image was shown to the user, this is a good place to
 // remove it.
 document.getElementById('loading').style.display = 'none';
}

To remove the loading image, use this function:

/**
 * 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) {
 // This marks the end of the polite load phase of the Ad. If a
 // loading image was shown to the user, this is a good place to
 // remove it.
 document.body.removeChild(document.getElementById('loading'));
}

The handleAdInitialized method is invoked after the ad has initialized. If polite loading is enabled, this method is invoked after the PAGE_LOADED (Enabler) event has been dispatched.

Was this article helpful?
How can we improve it?