Вежливая нагрузка веб-дизайнера Google

Просто начал использовать GWD - не так уж плохо. У меня есть большинство из них под контролем (на самом деле, как правило, через DreamWeaver вы можете редактировать код напрямую вместо GWD), но не можете понять, как настроить загрузочный образ Polite Load. Кто-нибудь знает, как заполнить эти пробелы с помощью изображения logo1.png? Я пробовал много вещей, но он всегда танцует всю сделку.

Вот связанный раздел кода инициализации, который предоставляет Google:

      /**
       * 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.
      }

      window.addEventListener('DOMContentLoaded',
        handleDomContentLoaded, false);
      window.addEventListener('WebComponentsReady',
        handleWebComponentsReady, false);
      window.addEventListener('adinitialized',
        handleAdInitialized, false);
    })();

image-preloader,google-web-designer,

1

Ответов: 3


4

Согласно документации Google , вы должны поместить <div>, содержащий ваше загрузочное изображение, после тэга <body>:

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

Затем в функции handleAdInitialised удалите или скройте изображение <div>:

function handleAdInitialised(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';
}

Единственная проблема, которую вы найдете здесь, это может испортить ваш предварительный просмотр в Google Web Designer.

Поэтому в настоящее время я добавляю CSS в представление кода, чтобы скрыть загружаемое изображение с предварительного просмотра сцены GWD:

/* CSS: HIDE OUR LOADING IMAGE */
<style>
.loading-image {
  display: none;
}
</style>

И затем в моей основной функции времени выполнения я устанавливаю атрибут отображения «block», чтобы вернуть его обратно.

<script type="text/javascript" id="gwd-init-code">
  (function() {
    document.body.style.opacity = "0";

    // SHOW OUR LOADING IMAGE AGAIN
    document.getElementById('loading').style.display = 'block';

Я думаю, что это должно решить проблему.


1

Просто начал использовать GWD, и у меня такой же вопрос. Gwd задает непрозрачность тела для «0» beacuse того, что loding img не отображается. В gwd «gwddoubleclick_min.js» задана непрозрачность тела.

document.body.style.opacity="0"

Я изменился;

document.getElementById("gwd-ad").style.opacity="0"

И после того, как каждый элемент загружен, в том же файле;

document.body.style.opacity=""

изменено;

document.getElementById("gwd-ad").style.opacity="",
document.getElementById('loading').style.display = 'none'

Это сработало для меня. Кто-нибудь получает другое решение?


0

Когда Бурак Сахин Эрден ответил передо мной, GWD устанавливает непрозрачность тела «0», которая, в свою очередь, скрывает div preLoad.

Добавление кода, о котором он говорил, похоже, является единственным способом обойти это, мое объявление работает, как ожидается, со следующим сценарием:

<script type="text/javascript" id="gwd-init-code">
(function() {
  document.getElementById("gwd-ad").style.opacity="0"
  document.body.style.opacity=""

  var gwdAd = document.getElementById('gwd-ad');

  document.getElementById('loading').style.display = 'block';

  /**
   * Handles the DOMContentLoaded event. The DOMContentLoaded event is
   * fired when the document has been completely loaded and parsed.
   */
  function handleDomContentLoaded(event) {}

  /**
   * Handles the WebComponentsReady event. This event is fired when all
   * custom elements have been registered and upgraded.
   */
  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) {
    document.getElementById("gwd-ad").style.opacity="",
    document.getElementById('loading').style.display = 'none'
  }

  window.addEventListener('DOMContentLoaded',
    handleDomContentLoaded, false);
  window.addEventListener('WebComponentsReady',
    handleWebComponentsReady, false);
  window.addEventListener('adinitialized',
    handleAdInitialized, false);
})();

изображения прелоадер, Google-веб-дизайнер,