Use a default loading image

This feature is unavailable for AMPHTML ads.

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

1. 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-google-ad id="gwd-ad" polite-load="">
       ...
   </gwd-google-ad>
</body>

2. Stop showing the loading image

You can either hide or remove the loading image by adding code to the handleAdInitialized function. This 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.

Hide the loading image

The highlighted code below will hide the loading image:

/**
 * 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';
}

Remove the loading image

The highlighted code below will remove the loading image:

/**
 * 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'));
}

Was this helpful?

How can we improve it?
Search
Clear search
Close search
Google apps
Main menu
4906093656536945066
true
Search Help Center
true
true
true