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

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

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

方法一：

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

HTML(代码放在广告位置)

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

JS(放在页面最后面)

var sidebarAdBox = document.getElementById('sidebarAdBox');
var sidebarAd = document.getElementById('sidebarAd');
window.onload = function(){
    sidebarAdBox.innerHTML = sidebarAd.value;
};

方法二：

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

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

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

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

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

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

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