[转载]广告影响网站打开速度解决方案 – 前端组qianduanzu.com – 博客园.
在自己博客上放广告联盟的广告也是一种收入来源。就我个人知道的有谷歌广告、阿里妈妈、百 度、网易游戏,还有个台湾的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();