Javascript implementation ads After loading can be loaded Baidu Google Alliance ads [original]_javascript Tips

This article mainly introduces a kind of new advertisement after loading the way, supports the custom HTML advertisement, the Baidu Alliance advertisement and the Google Alliance advertisement. This approach is performed after the page is loaded, without affecting the display of the content and being more user-friendly to the user.

We placed ads on the site, the simplest way is to put the JS code, insert the specified location, so with the consequences is that the page in order to load, occasionally an ad code card, the entire page will be stuck, to the user experience is very poor.

So how do you solve this problem? First of all, the principle of our page to reserve a number of placeholders, in order not to affect the content of the page to load, we at the bottom of the page to introduce JS processing, one by one to replace the placeholder to the corresponding ads.

Below we look at the specific implementation steps:

One, place the placeholder on the page, in fact, is a span tag

Copy Code code as follows:

<span id= "Ads_one" class= "Jbtestpos" ></span>
<span id= "Ads_two" class= "Jbtestpos" ></span>
<span id= "Ads_three" class= "Jbtestpos" ></span>

Second, write the independent JS script code: Jbloader.js

Copy Code code 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.jb51.net/" target= "_blank" > cloud-Habitat Community </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 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=" (adsbygoogle ">http://www.jb51.net" ></ins><scri ' + ' pt> (adsbygoogle = Window.adsbygoogle | | []). push ({}); </s ' + ' cript> ');
};

Note: Jbmap is an array of placed ads, the array key and span tag ID is corresponding, we can in this JS in this form to add their own ads. This kind of advertisement loading way, support custom HTML advertisement, Baidu Alliance advertisement, Google Alliance advertisement, here all give everybody to do a demo.

Third, in the bottom of the page to introduce JS, call Jbloader load ads

Copy Code code 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 the format above, with several placeholders, add several <script>jbloader (); </script><script class= "Closetag" >jbloader (True );</script>

Do not ask the small part why to call this way, in fact, small series also studied a bit:
1. The first Jbloader () is to write the mark, and the second Jbloader (true) is to replace the token.
2. Two <script> is used for the second call to get the corresponding element.
3. There are several placeholders for writing a few lines of script is for each other, each display.

In short: Many large websites are using this method, we rest assured that the use of good. This completes the call that is loaded after the page advertisement.