デフォルトの読み込み中画像を使用する

この機能は AMPHTML 広告では使用できません。

特に広告が非常に大きい場合は、広告の残りの要素が読み込まれている間に画像を表示すると効果的なことが多くあります。

1. 読み込み中画像を設定する

ID が「loading」の div を HTML に追加します。

<body style="visibility: hidden;">
   <div id="loading" class="loading-image">
       読み込んでいます...
   </div>
   <gwd-google-ad id="gwd-ad" polite-load="">
       ...
   </gwd-google-ad>
</body>

2. 読み込み中画像の表示を停止する

コードを handleAdInitialized 関数に追加すると、読み込み中画像を非表示にする、または削除することができます。これは、広告が初期化された後に呼び出されます。ポライトロードが有効になっている場合、このメソッドは、PAGE_LOADED(イネーブラー)イベントがディスパッチされた後に呼び出されます。

読み込み中画像を非表示にする

下記のハイライト表示されているコードによって、読み込み中画像が非表示になります。

/**
 * 広告が初期化された後、広告のデフォルト ページが表示される前に
 * ディスパッチされるイベントを処理します。
 */
function handleAdInitialized(event) {
  // これにより広告のポライトロード フェーズの終了が示されます。もし
  // 読み込み中画像がユーザーに表示された場合は、この時点でその画像を
  // 削除することをおすすめします。
  document.getElementById('loading').style.display = 'none';
}

読み込み中画像を削除する

下記のハイライト表示されているコードによって、読み込み中画像が削除されます。

/**
 * 広告が初期化された後、広告のデフォルト ページが表示される前に
 * ディスパッチされるイベントを処理します。
 */
function handleAdInitialized(event) {
  // これにより広告のポライトロード フェーズの終了が示されます。もし
  // 読み込み中画像がユーザーに表示された場合は、この時点でその画像を
  // 削除することをおすすめします。
  document.body.removeChild(document.getElementById('loading'));
}
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。