javascript 加载整个页面后加载 Google Ads
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25877461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load Google Ads after entire page has loaded
提问by PF Billing
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.
如果没有 Google Ads，我的 HTTPS 网页加载时间约为 500 毫秒。使用 Google Ads，加载同一个网页需要 2-5 秒。我有两个横幅广告（一个在顶部，一个在底部）。是的，它在广告之前呈现整个页面，但我仍然认为在等待广告完成时让浏览器旋转很笨拙。
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?
有没有什么方法可以用Javascript在广告之前完成页面加载，然后在后台加载广告？基本上，欺骗它认为整个页面已经加载？
Current code:
当前代码：
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My Ad Banner -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="myid"
data-ad-slot="myid"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
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
查看我网站的瀑布图，它看起来不像是 adsbygoogle.js 导致了负载指示器。相反，它是实际的广告内容本身。例如，这个对象（横幅广告）直到 1.8 秒才开始加载（在我的整个页面已经加载很久之后）：tpc.googlesyndication.com/simgad/AdID
Thanks!
谢谢！
回答by Maksim Vi.
Try this article.
试试这篇文章。
The trick is to put your ad initializing and loading logic in window's onloadevent:
诀窍是将您的广告初始化和加载逻辑放在窗口的onload事件中：
<script>
window.onload = function(){
...
};
</script>
回答by Erik Engi
This is my ultimate Vanilla JS solution:
这是我最终的 Vanilla JS 解决方案：
<script async defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
[].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
adsbygoogle.push({})
})
}
</script>
回答by René
A Vanilla solution is to leave all your ad code as is, except to remove the script tag, and then add to your javascript
Vanilla 解决方案是保留所有广告代码，除了删除脚本标记，然后添加到您的 javascript
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);
Disclaimer: as with the other answers to this question it is assumedthat Google does not disapprove of methods to improve page performance
免责声明：与此问题的其他答案一样，假设Google 不反对提高页面性能的方法
回答by Shopdaddy
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.
不管你在页面上有多少谷歌广告，在你的页面头部放一份外部 js 的副本......它在顶部是可以的，因为它是异步的。
Put the ins supplied by google where the ad is to appear.
将 google 提供的 ins 放在要显示广告的位置。
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:
如果您想在页面上添加第二个 adsense 广告，请不要重复 adsbygoogle.js（一个副本就足够了）...将第二个放在要显示的位置...在页面底部添加另一个推送所以它看起来像这样：
(adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});
回答by Showcase Imagery
Place the code for initiating the ad's at the bottom of the page just before the closing /body>tag
将用于启动广告的代码放在页面底部的关闭/body>标记之前
回答by Khan
(This solution requires jQuery)
（此解决方案需要 jQuery）
Remove the <script>tag from your code and add this to your javascript:
<script>从您的代码中删除标记并将其添加到您的 javascript 中：
$(function() {
$.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
});
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.
这将执行 AJAX 调用以获取脚本，而不是使用异步浏览器方法。这应该导致没有加载指示器。
回答by Keinan Goichman
This is what I did, after noticing adsense slows down page loading/rendering:
这就是我所做的，在注意到 AdSense 减慢了页面加载/渲染后：
first of all add this code to your <Body>tag:
首先将此代码添加到您的<Body>标签中：
<body onLoad="initialize_page();">
Now, put only one adsense script code, above the <HEAD>tag:
现在，只在<HEAD>标签上方放置一个 Adsense 脚本代码：
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Remove adsense <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>from all of your adsense code(one copy at the header is enough).
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>从所有的 adsense 代码中删除 adsense （在标题处复制一份就足够了）。
Remove all (adsbygoogle = window.adsbygoogle || []).push({});from your adsense code from your page. We will be using them over our initialize function.
(adsbygoogle = window.adsbygoogle || []).push({});从您的网页中删除所有的 AdSense 代码。我们将在我们的初始化函数中使用它们。
To our initialize_page() function, add this code:
在我们的 initialize_page() 函数中，添加以下代码：
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
}
This code is suitable for 3 adsense on your page. if you use only 2 or 1 adesnes, just remove (adsbygoogle = window.adsbygoogle || []).push({});from the function respectively.
此代码适用于您页面上的 3 个 adsense。如果您只使用 2 或 1 个 adesnes，只需(adsbygoogle = window.adsbygoogle || []).push({});分别从函数中删除。
