Loading Banner Advertisements with Jquery
Wall Script
Follow Me:
Tuesday, April 06, 2010

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.
loading banners with jquery

Download Script     Live Demo



Content block loading first then Topbanner finally Sidebanner
loading banners with jquery
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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


18 comments:

  1. Nice articles... could you please add some indentation to your code samples? Thanks!

    ReplyDelete
  2. interesting.. very good :))

    ReplyDelete
  3. You may want to add <noscipt> with the HTML embed for the ad for old browsers or browsers with JS disabled for compatibility.

    ReplyDelete
  4. que buen tip, es sencillo pero con buen resultado

    ReplyDelete
  5. Hi Advance,
    It's very good.
    Working fast loading on the web fast & execute fast.
    Thanks a lots.

    ReplyDelete
  6. one amazing script again from JQUERY master

    ReplyDelete
  7. 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...

    ReplyDelete
  8. Hey dude,

    Your works are excellent..

    simply superb..

    ReplyDelete
  9. It's useful for managing site loading time. Thanks.

    ReplyDelete
  10. it's good to show our own images but when you tried to load google adsense it wont..

    ReplyDelete
  11. Can it be possible to reload the banner after 2 mins

    ReplyDelete
  12. 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

    ReplyDelete
  13. Useful.. you can always load one originally and replace it after only if js is enabled. No need for noscript.

    ReplyDelete
  14. very useful tutorial thanks ...

    ReplyDelete
  15. Nice articles... could you please add some indentation to your code samples? Thanks!

    ReplyDelete

Make in India