Loading Banner Advertisements with Jquery

Banner advertisements eating your web page loading time? Take a look at this post. how to display advertisiment blocks after loading the main content block with jquery. It is very simple ajax implementation with jquery. Use it increase your web project loading speed.

 Download Script     Live Demo

Content block loading first then Topbanner finally Sidebanner

Javascript Code
Contains javascript code. Using jquery ajax function.

<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
Contains PHP and HTML code.

<?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;
}