Many website owners consider banners a good source of income and they strive to create the necessary traffic to be accepted by the more prestigious ad retailers.
On the down side these banners, magnificent as they may be, can make the website quite “heavy” and increase dramatically the loading times of the web pages. It would be ideal if there was a built-in feature by the ad servers that could delay showing the ads but I take this can be considered in the marketing circles more of an insult than a recommendation.
I had this problem with a website I was developing and I knew I had to find a solution, as performance was crucial. With some help from jQuery I happily found an elegant way that did the trick.
The general idea can be outlined in these steps:
1. Create the containers that host the banners empty
2. Inject and load the banners in a 1×1 iframe.
3. Copy the generated banner code to their intended containers.
4. Delete the dynamically created iframe and leave no trace.
To make this work you will need the containers of the banners in your markup, each assigned with a unique id. Additionally, you will need an extra page that will load the actual banner code, using the SAME container names.
When you have this, here is the JavaScript you need to insert in your pages:
/* Functions to load and show the banners post-load*/
function loadBanners(){
$("body").append('<iframe src="http://www/YOUR/ADS/PAGE” width=”1″ height=”1″ id=”ads-container” frameborder=”0″ />’);
}
function showBanners(){
var content= “”;
var banners = [”top-banner”,”left-banner”,”right-banner”];
//loop through all the ids we have specified above to contain banners
for ( var i in banners )
{
// remove the unnecessary script tags (that initially load the banners) - WARNING: this may not apply for you
$(’#ads-container’).contents().find(’#'+banners[i]+’ script:lt(2)’).remove();
// get the banner from the iframe
var content=$(’#ads-container’).contents().find(’#'+banners[i]).html();
// place the banner code in their containers in the main page
$(’#'+banners[i]).html(content);
}
// finally delete the container that loaded the ads
$(’#ads-container’).remove();
}
Replace:
- “http://www/YOUR/ADS/PAGE”, with the actual page where you have all your banner code.
- [”top-banner”,”left-banner”,”right-banner”], is an array containing all the ids of the containers you want to target.
Of course we need to trigger the first function the page loads…
$(document).ready(function() {
// finally load the banner ads for the page
loadBanners();
});
And then we need to trigger the second function when the ad page (in the iframe) loads. I’ll put in a sample code for the whole source code that contains the banner containers…
<html><body>
<div id="top-banner">[...BANNER CODE...]</div>
<div id="left-banner">[...BANNER CODE...]</div>
<div id="right-banner">[...BANNER CODE...]</div>
<script type="text/javascript"> $(document).ready(function() { showBanners(); }); </script>
</body></html>
And that’s it. Your pages are now free from the lagging of the banner code. Fortunately this solution does not rely on any specific ad provider and hopefully it will work for you whatever banners you use.
