I didn’t have much use for loading ads after my content, since on most of my sites and those I worked on, they were near the end of the code anyway, but while working on a site today I ran into a problem. There is an ad at the top of the design which tends to load slowly. I have specific requirements that the site should be as fast as possible, so I had to devise a way of loading the ad last. I went through some methods I found online after things off the top of my head didn’t work, but none helped, so I came up with my own code for it.
I am not taking credit for this, so if you did this before me feel free to let us know, but I did arrive at it on my own. The methods you could try is the “defer” attribute, which defers loading to the end of the page load, however, this had no effect at all. You can also try a “window.onload”, but this didn’t help either. With any other function combinations the ad either loaded as usual or did some weird stuff.
In the end, I decided to load the ad at the bottom of the page, right before the “” tag, and then use javascript to “transfer” the contents to where I need it do be, while keeping the source hidden. This is achieved using the “document.getElementById” method, read on to take a look at a specific example.
So what we need to do is create a div at the bottom of our page, load the advertisement there, and transfer it to the place we want it to be. I will be using inline CSS and inline javascript, which should not be done in real “life”, the best practice is to have all your CSS in external stylsheets and you javascript called from files in the header (where possible). The bottom of our page would look like this:
<div id=”top_ad_loader” style=”display:none;”>
Ad code in here
</div>
<script type=”text/javascript”>
document.getElementById(”top_ad”).innerHTML = document.getElementById(”top_ad_loader”).innerHTML
</script>
</body>
So what is going on here? We have two divs, the first is “top_ad_loader”, which you can see right here. This div is hidden, but contains the ad code. When the code is being read, the javascript might take a while to load, but we’re right at the bottom, so all our content is displayed already. There is also another div, “top_ad”, which can not be seen here, it is somewhere way above this part of our code, somewhere near the “<body>” tag.
There is javascript code right beneath the ad loader, the purpose of which is to transfer the loaded contents of the ad loader to te place where we want it to be. We “grab” the contents inside the ad loader using “document.getElementById(”top_ad_loader”).innerHTML“, and we want the contents of the actual ad block to equal this.
Once the page load gets to the ad it will slowly load it, when finished, parsing will continue, and our javascript will transfer the contents to the top.
If you have a page that loads a bit slowly, perhaps this method would be worth a try? Contents usually load faster than javascript, so if you place the javascript load last your content will load in 1-2 seconds (maybe much less), making the javascript load 1-2 seconds later. However, if a javascript at the beginning loads in 5 seconds, you need to wait that out just to start loading the content.
If you’d like to read some similar articles, take a look at Scriptastique, a blog all about web development and coding, with great tips on CSS, HTML, PHP, MySQL and Javascript and tutorials and screencasts coming soon! You can follow us on our RSS feed, or Twitter where we’re posting 3-4 short tips daily now!
Read Related Posts
-
Using javascript to hide and unhide elements dynamically
-
Download Youtube Videos as Mp4
-
Speed Test: Firefox 3 vs. IE 8 vs Opera 9.5
-
Save Google Video Files directly as Avi
-
Load Multiple URLs In Firefox
-
Opera’s progress bar in detail
-
View Javascript Sources with JSView
-
View Content of The Page cannot be displayed websites
6 Responses to “Load your advertisements after your content”
Trackbacks/Pingbacks
-
[...] Post gHacks – Load your advertisements after your content [...]
you have until i can move the cursor to the stop button or the close button or you’re history. that’s about 3 seconds max. if i do allow the page to load fully it’s only to gather info to ad to my block list. don’t worry, about me “stealing” your content and not reading your stinking ads because i probably won’t be returning. in other words, you won’t force your stinking ads on me twice. you will be blocked totally.
i’m getting really sick of multiple connections just to read a post.
nevermind
I think your approach is wrong. Proper solution should base on onload event attached to BODY tag. In case of image-ad you should just set it to “display:none” in CSS – that prevents images from loading till display property is changed. Dunno if it works with Flash (but it should), and if not, you can also try with setting src of object in onload event.
And my good advice is not to name DIVs like “top_ad”. That ad will be always blocked by AdBlockPlus. Better is to name it “top_a” of similar, or even with spell mistake.
Hi Thinker!
You are completely right, this is not the proper approach, however, it was the only one that seemed to work.
I am sure that using an onload in the body tag would work, but I probably overlooked something since it didn’t seem to do the trick, while this one did.
The div naming is good advice, hower, obviously I am naming my divs like this so that people reading the blog can understand what is going on.
I would actually name my div like this anyway, I doubt that someone using Adblock would click on an ad.
To prevent the ads from rendering twice (which they will with this setup) you need to use appendchild rather then innerhtml:
var loader= document.getElementById(’topslotloader’);
document.getElementById(”topslot”).appendChild(loader);
This prevents the Ads JS from firing twice and being only rendered once.