| 标题 | Javascript 实现广告后加载 可加载百度谷歌联盟广告 |
| 内容 | 本文主要介绍一种新的广告后加载的方式，支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行，不影响内容的显示，对用户更加友好。 本文主要介绍一种新的广告后加载的方式，支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行，不影响内容的显示，对用户更加友好。 我们在网站上放置广告，最简单的方法就是把JS代码，插入指定的位置，这样带了后果就是，页面按照顺序加载，偶尔一条广告代码卡住，整个页面都会卡住，给用户带来的体验是极差的。 那么怎么解决这种问题呢？先说一下原理，在我们的页面上先预留一些占位符，为了不影响页面内容的加载，我们在页面的底部引入JS处理，逐个把占位符替换成相应的广告。 下面我们看具体的实现步骤： 一、在页面上放置占位符，其实就是一个span标记 代码如下: <span id="ads_one"></span> <span id="ads_two"></span> <span id="ads_three"></span> 二、编写独立的JS脚本代码：jbLoader.js 代码如下: jbMap = window.jbMap || {}; function jbViaJs(locationId) { var _f = undefined; var _fconv = 'jbMap[\"' + locationId + '\"]'; try { _f = eval(_fconv); if (_f != undefined) { _f() } } catch(e) {} } function jbLoader(closetag) { var jbTest = null, jbTestPos = document.getElementsByTagName("span"); for (var i = 0; i < jbTestPos.length; i++) { if (jbTestPos[i].className == "jbTestPos") { jbTest = jbTestPos[i]; break } } if (jbTest == null) return; if (!closetag) { document.write("<span id=jbTestPos_" + jbTest.id + " style=display:none>"); jbViaJs(jbTest.id); return } document.write("</span>"); var real = document.getElementById("jbTestPos_" + jbTest.id); for (var i = 0; i < real.childNodes.length; i++) { var node = real.childNodes[i]; if (node.tagName == "SCRIPT" && /closetag/.test(node.className)) continue; jbTest.parentNode.insertBefore(node, jbTest); i-- } jbTest.parentNode.removeChild(jbTest); real.parentNode.removeChild(real) } jbMap['ads_one'] = function() { document.writeln('<a href="http://www.jb51.net/" target="_blank">脚本之家</a>'); }; jbMap['ads_two'] = function() { document.writeln('<scr'+'ipt type="text/javascript">var cpro_id = "u336546";</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></scr'+'ipt>'); }; jbMap['ads_three'] = function() { document.writeln('<scri'+'pt async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scri'+'pt><ins data-ad-client="ca-pub-1247620132145618" data-ad-slot="2253650178" data-override-format="true" data-page-url="http://www.jb51.net"></ins><scri'+'pt>(adsbygoogle = window.adsbygoogle || []).push({});</s'+'cript>'); }; 注意：jbMap是放置广告的数组，数组的Key和Span标记的ID是对应的，我们可以在这个JS中按照这种形式添加自己的广告。这种广告加载方式，支持自定义的HTML广告、百度联盟广告、谷歌联盟广告，这里都给大家做了演示。 三、在页面底部中引入JS，调用jbLoader加载广告 代码如下: <script type="text/javascript" src='js/jbLoader.js'></script> <script>jbLoader();</script><script>jbLoader(true);</script> <script>jbLoader();</script><script>jbLoader(true);</script> <script>jbLoader();</script><script>jbLoader(true);</script> 注意：格式必须是如上这种格式，有几个占位符，就添加几个<script>jbLoader();</script><script>jbLoader(true);</script> 不要问小编为什么要这样调用，其实小编也研究了一下： 1.第一次jbLoader()是为了写标记，第二次jbLoader(true)是为了替换标记。 2.用两个<script>是为了第二次调用能取到相应的元素。 3.有几个占位符就写几行script是为了互不影响，各显示各的。 总之：好多大网站都在使用这种方法，大家放心用好了。至此，就完成了页面广告后加载的调用。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。