0

我正在尝试动态更改使用 GWD 创建的广告单元上的图像。

我有一个在handleWebComponentsReady() 函数中调用initAd() 后调用的JSON 提要。

在本地这工作正常，广告初始化，然后进行 ajax 调用以检索资产列表，然后我使用 jQuery 将图像 src 换成新图像。

但是，在部署到实时服务器之后，它就无法工作了，看起来 initAd() 函数加载时间要长得多，这会产生 jQuery 无法找到要操作的 img 标签的连锁效应。

我尝试将我的 ajax 调用放在 handleAdInitialized() 事件中，该事件是在广告初始化之后但在广告本身呈现之前调用的，但似乎并非如此。

我还尝试在 ajax 调用上添加超时以等待几秒钟，然后再进行有效但不理想的更改。

这是我的提要示例，非常简单

{
   image1: "assets/img1.jpg",
   image2: "assets/img2.png",
   image3: "assets/img3.png",
   image4: "assets/img4.png",
   image5: "assets/img5.png"
}

这是事件

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) {
    $.ajax({
        url: "link-to-feed",
        jsonpCallback: "callback",
        dataType: "jsonp",
        async: false,
        success: function( response ) {
          console.log(response);

          $('#img1').css('background-image','url("' + response.image1 + '")');
          $('#img2').css('background-image','url("' + response.image2 + '")');
          $('#img3').css('background-image','url("' + response.image3 + '")');
          $('#img4').css('background-image','url("' + response.image4 + '")');
          $('#img5').css('background-image','url("' + response.image5 + '")');

        },
        error: function(response){
          console.log("error");
        }
    });
  }

有没有办法检测 initAd() 何时完全完成然后调用我的 ajax？

任何帮助，将不胜感激。

谢谢

4

2 回答 2

0

我不确定这是否是您想要的，但 gwdAd.initAd() 是在文档上调度“adinitialized”事件的函数。

   var onGWDAdInit = function(){
     console.log("The ad has initialized");
   }

   document.addEventListener("adinitialized",onGWDAdInit,false);
于 2018-08-14T19:33:17.177 回答
0

放置 while case 来检查 response.image1,response.image2 .. 是否为 null 怎么样，如果是，则等到值准备好

while (response.image1 == null  && response.image2 == null && response.image3 == null && response.image4 == null) {};

在有价值观之后

$('#img1').css('background-image','url("' + response.image1 + '")');
          $('#img2').css('background-image','url("' + response.image2 + '")');
          $('#img3').css('background-image','url("' + response.image3 + '")');
          $('#img4').css('background-image','url("' + response.image4 + '")');
          $('#img5').css('background-image','url("' + response.image5 + '")');
于 2017-08-30T22:26:51.467 回答