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