广告影响网站打开速度解决方案

在自己博客上放广告联盟的广告也是一种收入来源。就我个人知道的有谷歌广告、阿里妈妈、百度、网易游戏，还有个台湾的BloggerAds，是从无限博客那得知的。然而放入广告后会对网页打开速度有一些影响，有一个致命的问题。比如你把广告放在了网页顶部或靠上的位置，如果不做处理的话，那要等到这个广告加载完之后才能显示下面的正文内容。如果这个广告加载速度很慢，那这段时间下面的正文就会空白一片。用户体验非常不好。

前端组在这里提供解决方案，有需要的朋友认真看看下面的代码，相信会对你的博客有好处。

方法一：

使用onload事件，某些广告不支持这个方法，如BloggerAds。Google广告是支持的。BloggerAds请看第二种方法。

HTML(代码放在广告位置)

<div id="sidebarAdBox">
<p>广告正在努力加载中...</p>
<textarea id="sidebarAd" style="display:none;">
注意：此处放广告联盟提供的广告代码
</textarea>
</div>

JS(放在页面最后面)

1 var sidebarAdBox = document.getElementById('sidebarAdBox');
2 var sidebarAd = document.getElementById('sidebarAd');
3 window.onload = function(){
4     sidebarAdBox.innerHTML = sidebarAd.value;
5 };

方法二：

原理是把广告代码放到页面底部，则就是差不多最后加载了。先把生成的广告隐藏，再把它拿到自己相应的位置，再显示出来，OK！

HTML 1 (代码放在广告位置)

1 <div id="sidebarAdBox">
2 <p>广告正在努力加载中...</p>
3 </div>

HTML 2 (代码要放在页面最后面)

1 <div id="sidebarAd">
2 注意：此处放广告联盟提供的广告代码
3 </div>

jQuery代码(放在页面最后面)（原生态JS代码暂不提供，麻烦..）

1 var $sidebarAdBox = $('#sidebarAdBox');
2 $('#sidebarAd').appendTo($sidebarAdBox).show();
3 $sidebarAdBox.find('p').remove();