How To Make Loading Banner Advertisements With Jquery

When you go with the web advertisement on others blog or own blog, for branding your products or earning revenue. Also, promote others company or personal advertisement for earning. Then this post is for you. In this post, I will show you how to make loading banner advertisements with ajax implementation with jquery.

Banner advertisements are take loading time and make your website slow from previous. In this post you able to get your solution. By following this post you can visible your ad with jquery. It's very simple fo and uses it increase your web page loading speed.

Make Loading Banner Advertisements With Jquery

Javascript Code
You Just Contain javascript code. Using jquery ajax function. Let's see appear.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
content(); // 1 content block
topbanner(); // 2 top banner
sidebanner(); // 3 side banner

//Content Block
function content() 
{
$.ajax({
type: "POST",
url: "content.php", //Content Page
data: "" , 
beforeSend: function() 
{
$("div#content").html('<span class="loading">Loading...</span>');
},
cache: false,
success: function(data)
{ 
$("#content").html(data);
}
});
}

//Top Banner Block
function topbanner() 
{
$.ajax({
type: "POST",
url: "topbanner.php", //Top banner File
data: "" , 
beforeSend: function() 
{ 
$("div#topbanner").html('<span class="loading">Loading...</span>'); 
},
cache: false,
success: function(data)
{ 
$("#topbanner").html(data);
}
});
}
//Side banner funtion same like topbanner.

});
</script>

//HTML Code

<div id="main">
<div id="topbanner"></div>
<div id="content"></div>
<div id="sidebanner"></div> 
</div>

topbanner.php (PHP&HTML)

<?php
echo '<a href=""><IMG src="topbanner.png"  /></a>';
?>

CSS Code

#main
{
width:900px; border:solid 2px #dedede; margin-top:30px; height:600px
}
#topbanner
{
height:100px; border-bottom:solid 2px #dedede
}
#content
{
float:left;width:750px; height:498px
}
#sidebanner
{
float:left;width:148px; height:498px;border-left:solid 2px #dedede
}
.loading
{
color:#cc0000;
}

These are the codes for making loading banner Ad. Hopefully, you enjoy this post and let me know have any question.

About Luthfar Rahman

I am Luthfar Rahman is the founder of Megaupdate24. I am a Computer Science Engineer, Online Marketer, and Public Speaker. Like to traveling and have been blogging last 7 years. Follow me on Facebook, Google+ and Twitter.