[转载]广告影响网站打开速度解决方案

[转载]广告影响网站打开速度解决方案 – 前端组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();
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏