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!
ReplyDeleteNice articles... could you please add some indentation to your code samples? Thanks!
ReplyDeleteinteresting.. very good :))
ReplyDeleteYou may want to add <noscipt> with the HTML embed for the ad for old browsers or browsers with JS disabled for compatibility.
ReplyDeleteque buen tip, es sencillo pero con buen resultado
ReplyDeleteHi Advance,
ReplyDeleteIt's very good.
Working fast loading on the web fast & execute fast.
Thanks a lots.
one amazing script again from JQUERY master
ReplyDeleteHi Sri etta...
ReplyDeleteI 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
ReplyDeleteThank you!
Hey dude,
ReplyDeleteYour works are excellent..
simply superb..
It's useful for managing site loading time. Thanks.
ReplyDeleteit's good to show our own images but when you tried to load google adsense it wont..
ReplyDeleteCan it be possible to reload the banner after 2 mins
ReplyDeleteNice, but there is a downside with this approach.
ReplyDeleteBanners 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 !
ReplyDeleteUseful.. you can always load one originally and replace it after only if js is enabled. No need for noscript.
ReplyDeletevery useful tutorial thanks ...
ReplyDeleteNice articles... could you please add some indentation to your code samples? Thanks!
ReplyDelete