Javascript achieves ad loading and can load Baidu Google Alliance ad originality, Google font

Javascript achieves ad loading and can load Baidu Google Alliance ad originality, Google font

This article mainly introduces a new post-ad loading method that supports custom HTML ads, Baidu Alliance ads, and Google Alliance ads. This method is executed after the page is loaded without affecting the display of the content, which is more user-friendly.

When we place advertisements on the website, the simplest way is to insert the JS Code into the specified location. The consequence is that the page is loaded in order, and occasionally an advertisement code gets stuck, the whole page will be stuck, and the user experience is very poor.

How can this problem be solved? First, let's talk about the principle. We reserve some placeholders on our pages. In order not to affect the loading of page content, we introduce JS processing at the bottom of the page and replace the placeholders with corresponding advertisements one by one.

The specific implementation steps are as follows:

1. Placing placeholders on the page is actually a span tag

Copy codeThe Code is as follows:
<Span id = "ads_one" class = "jbTestPos"> </span>
<Span id = "ads_two" class = "jbTestPos"> </span>
<Span id = "ads_three" class = "jbTestPos"> </span>

2. Compile an independent JS script code: jbLoader. js

Copy codeThe Code is as follows:
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.bkjia.com/" target = "_ blank"> helper house </a> ');
};
 
JbMap ['ads _ two'] = function (){
Document. writeln ('<scr' + 'iptype = "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 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 =" http://www.bkjia.com "> </ins> <scri '+ 'pt> (adsbygoogle = window. adsbygoogle | []). push ({}); </s '+ 'samples> ');
};

Note: jbMap is an array for placing advertisements. The Key of the array corresponds to the ID of the Span tag. We can add our own advertisements in this form in this JS. This advertisement Loading Method supports custom HTML ads, Baidu Alliance ads, and Google Alliance ads. Here we will give you a demonstration.

3. Introduce JS in the bottom of the page and call jbLoader to load the advertisement

Copy codeThe Code is as follows:
<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>

Note: The format must be in the preceding format. If there are several placeholders, add <script> jbLoader (); </script> <script class = "closetag"> jbLoader (true ); </script>

Don't ask why xiaobian calls it like this. In fact, I have also studied it:
1. The first jbLoader () is to write the mark, and the second jbLoader (true) is to replace the mark.
2. Two <scripts> are used to obtain the corresponding elements for the second call.
3. There are several placeholders to write a few lines of scripts to show each other without affecting each other.

In short: many large websites are using this method, so you can use it with confidence. So far, the call to load the page advertisement is completed.