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 DemoContent block loading first then Topbanner finally Sidebanner
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
{
$.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);
}
});
}
{
$.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>
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="topbanner"></div>
<div id="content"></div>
<div id="sidebanner"></div>
</div>
</div>
topbanner.php
Contains PHP and HTML code.
<?php
echo '<a href=""><IMG src="topbanner.png" /></a>';
?>
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;
}
{
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;
}
thats cool dude, thanks!
Nice articles... could you please add some indentation to your code samples? Thanks!
interesting.. very good :))
You may want to add <noscipt> with the HTML embed for the ad for old browsers or browsers with JS disabled for compatibility.
que buen tip, es sencillo pero con buen resultado
Hi Advance,
It's very good.
Working fast loading on the web fast & execute fast.
Thanks a lots.
one amazing script again from JQUERY master
Hi Sri etta...
I am a regular reader(Follower) of your posts...
All of them are very great........
Now i am a fan of you...
If you dnt mind ,Please make a page which contains list of all your old posts....
Thank you...
@PravySoft
Thank you!
Hey dude,
Your works are excellent..
simply superb..
It's useful for managing site loading time. Thanks.
it's good to show our own images but when you tried to load google adsense it wont..
Can it be possible to reload the banner after 2 mins
Nice, but there is a downside with this approach.
Banners can't communicate with each other. So it is not possible to show only banners for brand X. So block a competitor.
Last comment. yes, you can. You can use something like this:
setTimeout(20000, function() {
topBanner();
});
cheers,
xfinx
Cool man !
Useful.. you can always load one originally and replace it after only if js is enabled. No need for noscript.