当前位置: 澳门新濠3559 > 服务器运维 > 正文

等页面加载完再加载广告其实就是将广告的,一

时间:2019-12-26 07:51来源:服务器运维
先加载完页面再加载广告的原理:网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码。等页面加

先加载完页面再加载广告的原理: 网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码。等页面加载完再加载广告其实就是将广告的 JS 代码放在页面的底部,等页面内容打开完成后再加载到广告代码,再用页面上预留好的的 DIV 输出广告。 使用方法: 1、将以下代码放置页面中想要放广告的地方 复制代码 代码如下:

本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好。

Javascript 实现广告后加载 可加载百度谷歌联盟广告 原创,谷歌font

  本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好。

  我们在网站上放置广告,最简单的方法就是把JS代码,插入指定的位置,这样带了后果就是,页面按照顺序加载,偶尔一条广告代码卡住,整个页面都会卡住,给用户带来的体验是极差的。

  那么怎么解决这种问题呢?先说一下原理,在我们的页面上先预留一些占位符,为了不影响页面内容的加载,我们在页面的底部引入JS处理,逐个把占位符替换成相应的广告。

下面我们看具体的实现步骤:

一、在页面上放置占位符,其实就是一个span标记

复制代码 代码如下:
<span id="ads_one" class="jbTestPos"></span>
<span id="ads_two" class="jbTestPos"></span>
<span id="ads_three" class="jbTestPos"></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="" target="_blank">帮客之家</a>');
};
 
jbMap['ads_two'] = function() {
 document.writeln('<scr'+'ipt type="text/javascript">var cpro_id = "u336546";</script><script src="" 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 class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1247620132145618" data-ad-slot="2253650178" data-override-format="true" data-page-url=" = 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 class="closetag">jbLoader(true);</script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

注意:格式必须是如上这种格式,有几个占位符,就添加几个<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

不要问小编为什么要这样调用,其实小编也研究了一下:
1.第一次jbLoader()是为了写标记,第二次jbLoader(true)是为了替换标记。
2.用两个<script>是为了第二次调用能取到相应的元素。
3.有几个占位符就写几行script是为了互不影响,各显示各的。

总之:好多大网站都在使用这种方法,大家放心用好了。至此,就完成了页面广告后加载的调用。

实现广告后加载 可加载百度谷歌联盟广告 原创,谷歌font 本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告、百度联盟...

载入中…

我们在网站上放置广告,最简单的方法就是把JS代码,插入指定的位置,这样带了后果就是,页面按照顺序加载,偶尔一条广告代码卡住,整个页面都会卡住,给用户带来的体验是极差的。

2、将一下代码放置页面底部,也就是footer,php文件的底部。 复制代码 代码如下:

那么怎么解决这种问题呢?先说一下原理,在我们的页面上先预留一些占位符,为了不影响页面内容的加载,我们在页面的底部引入JS处理,逐个把占位符替换成相应的广告。

这里放广告代码

下面我们看具体的实现步骤:

OK,这样就实现了先加载完页面再加载广告了,怎么样不影响大家阅读吧.

一、在页面上放置占位符,其实就是一个span标记

上面的方法可以加载任何方式的广告,但现在百度与google的都不让使用了,容易造成广告的二次加载,点击率也会降低。下面脚本之家小编为大家分享下,比较新的加载广告的方式:

复制代码 代码如下:

1、可以加载字符串类型与google类型的

二、编写独立的JS脚本代码:jbLoader.js

function doad{ //getid.innerHTML = datastr; &#36825;&#20010;&#26159;&#21407;&#29983;js&#30340;&#20889;&#27861;$; //&#36825;&#20010;&#26159;jquery&#20889;&#27861;}/*&#19978;&#38754;&#30340;&#37117;&#26159;&#30452;&#25509;&#30340;&#23383;&#31526;&#20018;&#20889;&#20837;&#65292;&#19981;&#33021;&#26159;js&#20195;&#30721;&#19979;&#38754;&#30340;&#20195;&#30721;&#21033;&#29992;&#30340;&#26159;jquery&#30340;append&#21152;&#36733;google&#24191;&#21578;&#19981;&#38169;&#65292;&#30334;&#24230;&#30340;&#22909;&#20687;&#19981;&#33021;&#29992;&#12290;&#21518;&#21152;&#36733;&#30334;&#24230;&#30340;&#21487;&#20197;&#26159;&#29992;&#30334;&#24230;&#31649;&#23478;&#33258;&#24102;&#30340;&#20989;&#25968;&#12290;*/function doad2{ $.append;}var logo_m='&lt;a href="http://www.danhw.com/" target="_blank"&gt;&lt;img src="//files.jb51.net/image/kongbao_370.gif" width=370 height=60 /&gt;&lt;/a&gt;';doad;

复制代码 代码如下:jbMap = window.jbMap || {};function jbViaJs { var _f = undefined; var _fconv = 'jbMap["' + locationId + '"]'; try { _f = eval; if { _f {}}function jbLoader { var jbTest = null, jbTestPos = document.getElementsByTagName; for (var i = 0; i < jbTestPos.length; i++) { if (jbTestPos[i].className == "jbTestPos") { jbTest = jbTestPos[i]; break } } if return; if { document.write(""); jbViaJs; return } document.write; 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 continue; jbTest.parentNode.insertBefore; i-- } jbTest.parentNode.removeChild; real.parentNode.removeChild}jbMap['ads_one'] = function() {document.writeln('脚本之家');};jbMap['ads_two'] = function() {document.writeln('var cpro_id = "u336546";

2、可以加载google广告的代码

');};jbMap['ads_three'] = function() {document.writeln('(adsbygoogle = window.adsbygoogle || []).push;};

$.ready{$.append("" +"&lt;/script&gt;"+"&lt;!-- question-side --&gt;"+"&lt;ins class="adsbygoogle""+" style="display:inline-block;width:728px;height:90px""+" data-ad-client="ca-pub-345345345345""+" data-ad-slot="345345345"&gt;&lt;/ins&gt;"+"&lt;script&gt;"+" (adsbygoogle = window.adsbygoogle || []).push;});&lt;/pre&gt;&lt;p&gt;&#19968;&#33324;&#37117;&#26159;&#39029;&#38754;&#23436;&#20840;&#21152;&#36733;&#23436;&#65292;&#20877;&#21152;&#30340;&#24191;&#21578;&#65292;&#24403;&#28982;&#29616;&#22312;google&#29616;&#22312;&#26032;&#20986;&#30340;&#24322;&#27493;&#21152;&#36733;&#24191;&#21578;&#30340;&#20195;&#30721;&#20063;&#26159;&#25402;&#24555;&#30340;&#65292;&#19981;&#20250;&#21345;&#32593;&#39029;&#20102;&#12290;&#19978;&#38754;&#30340;&#37117;&#26159;&#21518;&#21152;&#36733;google&#30340;&#24322;&#27493;&#24191;&#21578;&#20195;&#30721;&#12290;&lt;/p&gt;&lt;p&gt;&#23545;&#20110;&#36825;&#26679;&#30340;&#23383;&#31526;&#21152;&#36733;&#26041;&#27861;&#65292;&#20010;&#20154;&#19981;&#22826;&#21916;&#27426;&#65292;&#25105;&#36824;&#26159;&#27604;&#36739;&#21916;&#27426;&#36825;&#26679;&#30340;&#65292;&#20195;&#30721;&#22914;&#19979;&lt;/p&gt;&lt;pre &gt;var botad='&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;';botad+='(adsbygoogle = window.adsbygoogle || []).push;';$.ready{$.append;

注意:jbMap是放置广告的数组,数组的Key和Span标记的ID是对应的,我们可以在这个JS中按照这种形式添加自己的广告。这种广告加载方式,支持自定义的HTML广告、百度联盟广告、谷歌联盟广告,这里都给大家做了演示。

3、可以加载百度广告联盟的代码百度管家自带的后加载广告的代码,基于jquery

三、在页面底部中引入JS,调用jbLoader加载广告

$.getScript("http://cbjs.baidu.com/js/m.js", function() {BAIDU_CLB_fillSlotAsync("&#24191;&#21578;id&#65292;&#19981;&#33021;&#24102;u","tonglanbd");});

复制代码 代码如下:

注意:格式必须是如上这种格式,有几个占位符,就添加几个

不要问小编为什么要这样调用,其实小编也研究了一下:1.第一次jbLoader()是为了写标记,第二次jbLoader是为了替换标记。2.用两个

编辑:服务器运维 本文来源:等页面加载完再加载广告其实就是将广告的,一

关键词: