将 adsense 代码移至末尾，但广告有时不会在初始网站加载时显示

Question

这是我用于我网站的代码框架，用于将广告加载移动到网站底部。虽然几乎一切都运行良好，但我发现在第一次加载页面时，不时会出现没有广告的情况。我不确定是不是因为浏览器不知道如何自动重新加载完成的 DOM，但它很烦人，因为每次我点击刷新时，都会出现一个广告。我不确定它 google 是否无法投放广告，或者它的浏览器是否没有按预期处理我的代码。

    <!-- Website header here -->
    <div ID="ADW">ADVERTISEMENT</div>
    <div ID="AB"><!-- advertisement goes here after load --></div>
    <script type="text/javascript">
            // choose ad unit based on user's screen
            // size and format ad box to that size.
            var s="#####";
            var w=728;
            var h=90;
            if(window.innerWidth<500){
                    if(w>320){s="####";w=320;h=50}else{s="#####";w=234;h=60}
            }
            var AD=document.getElementById('AB');
            AD.style.height=h+'px';
            AD.style.width=w+'px';
    </script>
    <!-- Website content here -->
    <div ID="ADS">
            <!-- Ad will load in this DIV after webpage is loaded -->
            <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript" async></script>
            <ins ID="XX" class="adsbygoogle"></ins>
            <script type="text/javascript">
                    // loaderr is only set on pages where ad isn't supposed to run.
                    if (typeof(loaderr)=='undefined'){
                    (adsbygoogle=window.adsbygoogle||[]).push({params:{data_override_format:"true",data_page_url:"http://example.com/",google_ad_slot:s,google_ad_client:"#####",google_ad_width:w,google_ad_height:h}});
                    }
            </script>
            <script type="text/javascript">
                    var x=document.getElementById('XX'); //cram ad in
                    x.style.height=h+'px'; // I know sizes are equal but ad can fit
                    x.style.width=w+'px';  // and this was tested.
                    // give title of all adsense IFRAMES
                    // to meet accessibility guidelines
                    var xif=document.getElementsByTagName('IFRAME');
                    for(var i=0;i<xif.length;i++){
                    xif[i].title='Advertisement '+i;
                    }
            </script>
    </div>
    <script type="text/javascript">
            // Display the ad but 10% of the time it doesn't appear.
            if (typeof(AD) !== 'undefined'){
                    AD.appendChild(document.getElementById('ADS'));
            }
    </script>

为了让我排除一切，我想知道一种添加重绘功能的方法，使原本打算显示的广告实际显示出来。我不要求在页面加载期间更改广告。我只是要求在不要求用户点击刷新的情况下显示广告。在不违反 adsense 政策的情况下，是否有 javascript 解决方案？

我用 ##### 替换了 adsense 广告编号和发布商 ID，以防止其他人乱用我的广告。

Answer 1

第一个 <script> 有一个 async attribute which means that it will load asynchronously。看起来你有一个 "race condition" 因为它只是有时有效。

最快的解决方案： 将删除 async 属性，因为这将强制脚本同步加载（因此，只要您放置了脚本在 HTML 中 <body> 的底部，DOM 将在脚本运行) 时准备就绪。

另一个选项：为了更明确地说明您希望脚本何时运行运行，您可以使用 DOMContentLoaded or load events，具体取决于您是否需要一旦 DOM 准备就绪或页面上的其他所有内容都已加载完毕，就将脚本添加到运行。例如，

document.addEventListener('DOMContentLoaded', function() {
  // code to run after DOM has been loaded and parsed
  alert('DOM is ready!');
});

将 adsense 代码移至末尾，但广告有时不会在初始网站加载时显示

Moved adsense code to end but ads sometimes do not display on initial site load

javascript

browser

rendering

repaint

adsense