entityMap|blocks|key|elsbl|text|将启动广告的代码放在页面的底部，就在关闭之前|type|unstyled|depth|inlineStyleRanges|entityRanges|data|f4k9f|/body>|75eru|标签^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

Place the code for initiating the ad's at the bottom of the page just before the closing /body> tag

entityMap|blocks|key|1pprd|text|(此解决方案需要jQuery)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fn71t|删除^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

(This solution requires jQuery)

Remove the <code>&lt;script&gt;</code> tag from your code and add this to your javascript:

<pre><code>$(function() {
 $.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
});
</code></pre>

This will do an AJAX call to get the script, rather than using the async browser method. This should result in not having the loading indicator.

ref: <a href="http://api.jquery.com/jquery.getscript/" rel="nofollow">http://api.jquery.com/jquery.getscript/</a>

entityMap|blocks|key|380ik|text|尝试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dqtk4|本文|76duv|..。|b6ae3|诀窍是将广告初始化和加载逻辑放在window的|bcgv4|事件：|5ei0n|window.onload+=+function(){
+++++++...
+++};|code-block|syntax|javascript^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Q|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|R|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|S|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|T|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|U|9|@]|A|@]|B|$N|O]]]]

Try <a href="http://semplicewebsites.com/google-ads">this article</a>.

The trick is to put your ad initializing and loading logic in window's <code>onload</code> event:

<pre><code>&lt;script&gt;
 window.onload = function(){
 ...
 };
&lt;/script&gt;
</code></pre>

entityMap|blocks|key|9l8mv|text|无论页面上有多少个google广告，都要在页面的头部放置一个外部js的副本。这在顶部是可以的，因为它是异步的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c4pae|将谷歌提供的ins放在广告要出现的地方。|ddo48|在页面的底部，就在end+body标签之前，放置用于推送广告的脚本。|4hvk2|现在广告将在页面完成后加载！|6nk1f|如果你想在页面上添加第二个广告，不要重复adsbygoogle.js+(一个副本就足够了)+...将第二个放在要显示的位置...在页面底部添加另一个推送，使其看起来如下所示：|17kpa|(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).push({})；(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).push({})；^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|O|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|P|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|Q|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|R|9|@]|A|@]|B|$]]]]

No matter how many google ads you have on the page, put ONE copy of the external js within the head of your page ... it's OK at the top since it's async. 

Put the ins supplied by google where the ad is to appear.

At the bottom of your page, just before the end body tag, put the script to push the ad.

Now the ad will load after your page is complete !

If you want to add a second adsense ad on the page, do not repeat the adsbygoogle.js (one copy is enough) ... put the second where it is to be displayed ... add another push at the bottom of your page so it looks like this:

(adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({});

entityMap|blocks|key|231uu|text|这是我的终极Vanilla+JS解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|di9l|(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).onload+=+function+()+{
++++++++[].forEach.call(document.getElementsByClassName('adsbygoogle'),+function+()+{
++++++++++++adsbygoogle.push({})
++++++++})
++++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

This is my ultimate Vanilla JS solution:

<pre><code>&lt;script async defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;
&lt;script&gt;
 (adsbygoogle = window.adsbygoogle || []).onload = function () {
 [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
 adsbygoogle.push({})
 })
 }
&lt;/script&gt;
</code></pre>

entityMap|blocks|key|1014a|text|这就是我在注意到adsense减慢页面加载/渲染后所做的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9doha|首先，将以下代码添加到您的标记中：|5n2ii|现在，只将一个adsense脚本代码放在标签之上：|6spld|从所有的adsense代码中删除adsense+(在标题处复制一份就足够了)。|142sa|全部删除|fjl9d|来自你的页面的adsense代码。我们将在初始化函数中使用它们。|600gf|到我们的初始化|3up0v|_|5b2aj|page()函数，添加以下代码：|9stah|function+initialize_page()
{
++++(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).push({});//this+is+for+the+first+adsense
++++(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).push({});//this+is+for+the+second
++++(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).push({});//this+is+for+the+third
}|code-block|syntax|javascript|f13n7|这段代码适用于你的页面上的3AdSense。如果您只使用2个或1个adesnes，只需删除|5min8|分别来自函数。^0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|11|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|12|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|13|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|14|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|15|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|16|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|17|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|18|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|19|9|@]|A|@]|B|$]]|$2|S|4|T|6|U|8|1A|9|@]|A|@]|B|$V|W]]|$2|X|4|Y|6|7|8|1B|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1C|9|@]|A|@]|B|$]]]]

This is what I did, after noticing adsense slows down page loading/rendering:

first of all add this code to your <code>&lt;Body&gt;</code> tag:

<pre><code>&lt;body onLoad="initialize_page();"&gt;
</code></pre>

Now, put only one adsense script code, above the <code>&lt;HEAD&gt;</code> tag:

<pre><code>&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;
</code></pre>

Remove adsense <code>&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;</code> from all of your adsense code(one copy at the header is enough).

Remove all <code>(adsbygoogle = window.adsbygoogle || []).push({});</code> from your adsense code from your page. We will be using them over our initialize function.

To our initialize_page() function, add this code:

<pre><code>function initialize_page()
{
 (adsbygoogle = window.adsbygoogle || []).push({});//this is for the first adsense
 (adsbygoogle = window.adsbygoogle || []).push({});//this is for the second
 (adsbygoogle = window.adsbygoogle || []).push({});//this is for the third
}
</code></pre>

This code is suitable for 3 adsense on your page. if you use only 2 or 1 adesnes, just remove <code>(adsbygoogle = window.adsbygoogle || []).push({});</code> from the function respectively.

entityMap|blocks|key|f5mu4|text|一个Vanilla解决方案是保留所有广告代码不变，除了删除script标记，然后添加到javascript中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|93bdv|function+loadGoogleAds()+{
++++var+scriptTag+=+document.createElement('script');
++++scriptTag.setAttribute('src',+'//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
++++scriptTag.setAttribute('type',+'text/javascript');
++++scriptTag.setAttribute('async',+'async');
++++document.body.appendChild(scriptTag);
}
window.addEventListener("load",+loadGoogleAds);|code-block|syntax|javascript|drv9v|免责声明:与这个问题的其他答案一样，它是|9ur7|假设|at5e4|谷歌并不反对提高页面性能的方法^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

A Vanilla solution is to leave all your ad code as is, except to remove the script tag, and then add to your javascript

<pre><code>function loadGoogleAds() {
 var scriptTag = document.createElement('script');
 scriptTag.setAttribute('src', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
 scriptTag.setAttribute('type', 'text/javascript');
 scriptTag.setAttribute('async', 'async');
 document.body.appendChild(scriptTag);
}
window.addEventListener("load", loadGoogleAds);
</code></pre>

Disclaimer: as with the other answers to this question it is assumed that Google does not disapprove of methods to improve page performance

entityMap|blocks|key|1t5pm|text|我把|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38m8h|就在关闭body标签并将其从每个adsense广告中删除之前。|d2inb|广告显示良好，页面加载速度非常快。|91r1t|经过多次测试，我发现有时safari中不会显示广告。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

I put
<pre><code>&lt;script async src=&quot;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
</code></pre>
just before closing the body tag and removed it from every adsense ad.
Ads show fine and the page loads very fast.
<hr />
After many tests I found that sometimes ads don't show in safari.

entityMap|blocks|key|3pi|text|广告|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bsr1f|_|c536|onscroll|c0ubu|8t577|事件|4fn89|当然，这就是原始广告单元代码的样子。|f164h|(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).push({});|code-block|syntax|javascript|d8s34|首先，从所有现有的广告单元中删除以下脚本。|3r2o|和|3hjd1|(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).push({});|b9n4o|现在它看起来就像这样|aa0mi|这种方法将加载广告单元，一旦用户滚动你的网页，在有广告的页面上添加以下内容：|4or0i|//|5bbj3|2g8t8|(adsbygoogle+=+window.adsbygoogle+%7C%7C+[]).onload+=+function+()+{
++++[].forEach.call(document.getElementsByClassName('adsbygoogle'),+function+()+{
++++adsbygoogle.push({})
++})
}^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|15|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|16|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|17|9|@]|A|@]|B|$]]|$2|G|4|D|6|7|8|18|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|19|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|1A|9|@]|A|@]|B|$]]|$2|L|4|M|6|N|8|1B|9|@]|A|@]|B|$O|P]]|$2|Q|4|R|6|7|8|1C|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1D|9|@]|A|@]|B|$]]|$2|U|4|V|6|N|8|1E|9|@]|A|@]|B|$O|P]]|$2|W|4|X|6|7|8|1F|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|1G|9|@]|A|@]|B|$]]|$2|10|4|11|6|N|8|1H|9|@]|A|@]|B|$O|P]]|$2|12|4|T|6|7|8|1I|9|@]|A|@]|B|$]]|$2|13|4|14|6|N|8|1J|9|@]|A|@]|B|$O|P]]]]

Ads_onscroll_event
Naturally, this is how an original ad unit code look.
<pre><code>&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!-- leaderboard --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
style=&quot;display:inline-block;width:728px;height:90px&quot;
data-ad-client=&quot;ca-pub-xxxxxxxxxxxxxxxx&quot;
data-ad-slot=&quot;1234567890&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
</code></pre>
First of all, remove below script from all existing ad units.
<pre><code>&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
</code></pre>
And
<pre><code>&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
</code></pre>
Now it will appear like this
<pre><code>&lt;ins class=&quot;adsbygoogle&quot;
style=&quot;display:inline-block;width:728px;height:90px&quot;
data-ad-client=&quot;ca-pub-xxxxxxxxxxxxxxxx&quot;
data-ad-slot=&quot;1234567890&quot;&gt;&lt;/ins&gt;
</code></pre>
This approach will load ad unit once user scroll your web page add this on page that has ads:
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
//&lt;![CDATA[
var la=!1;window.addEventListener(&quot;scroll&quot;,function(){(0!=document.documentElement.scrollTop&amp;&amp;!1===la||0!=document.body.scrollTop&amp;&amp;!1===la)&amp;&amp; (!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;;var a=document.getElementsByTagName(&quot;script&quot;)[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);//]]&gt;
&lt;/script&gt;
</code></pre>
And
<pre><code>&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).onload = function () {
 [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
 adsbygoogle.push({})
 })
}
&lt;/script&gt;
</code></pre>

Without Google Ads, my HTTPS webpage loads in about 500ms. With Google Ads, the same webpage takes 2-5 seconds to load. I have two banner ads (one at the top and one at the bottom). Yes, it renders the entire page before the ads, but I still think it's clunky to have the browser spinning while it waits for the ads to finish.

Is there any way with Javascript to finish page loading before the ads, and then just load the ads in the background? Basically, trick it into thinking the entire page is already loaded?

Current code:

<pre><code>&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;
&lt;!-- My Ad Banner --&gt;
&lt;ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="myid"
 data-ad-slot="myid"&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
</code></pre>

Looking at the waterfall for my site, it doesn't look like the adsbygoogle.js is causing the load indicator. Instead, it's the actual ad content itself. For example, this object (the banner ad) doesn't even start loading until 1.8 seconds (long after my entire page has already loaded): tpc.googlesyndication.com/simgad/AdID

Thanks!

Load Google Ads after entire page has loaded

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 如果没有Google Ads，我的HTTPS网页加载时间约为500ms。使用谷歌广告，同样的网页需要2-5秒才能加载。我有两个横幅广告(一个在顶部，一个在底部)。是的，它在广告之前呈现整个页面，但我仍然认为在等待广告结束时让浏览器旋转是很笨拙的。 Javascript有没有办法在广告之前完成页面加载，然后在后台加载广...

问在整个页面加载后加载Google广告
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在整个页面加载后加载Google广告EN