Load your advertisements after your content

Daniel Pataki — Sun, 05 Apr 2009 22:55:05 +0000

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:

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 “” 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!

Tags: advertising, delay javascript, javascript, loading time

gHacks technology news » delay javascript

Load your advertisements after your content

Related posts