Load your advertisements after your content - gHacks Tech News

Load your advertisements after your content

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>

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.

Summary
Article Name
Load your advertisements after your content
Description
Daniel describes a way to load an advertisement on a web page after any of the other content is loaded to avoid slow downs.
Author
Publisher
Ghacks Technology News
Logo

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

  1. sexysofie said on April 6, 2009 at 1:31 am
    Reply

    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.

    1. twatcoders said on January 18, 2014 at 9:59 pm
      Reply

      This ^^ x 100

  2. Anonymous said on April 6, 2009 at 2:49 am
    Reply

    nevermind

  3. Thinker said on April 6, 2009 at 9:10 am
    Reply

    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.

  4. Daniel Pataki said on April 6, 2009 at 12:00 pm
    Reply

    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.

  5. oli said on April 21, 2009 at 1:12 pm
    Reply

    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.

  6. Bhavin said on November 12, 2010 at 3:01 am
    Reply

    Thanks. This was very helpful. I tried it as is (with the appendchild) and did not see the JS firing twice.

  7. Ilie said on November 15, 2010 at 10:40 pm
    Reply

    HI : Daniel Pataki,

    You can add the

    your add code

    document.getElementById(“ads728”).innerHTML = document.getElementById(“ads728loader”).innerHTML;

    after tag and the ad will load the last even after the footer load sow i think it’s a good idea :D and to have the add loaded add ” ” hope Helped

    Regards ILIE

  8. Ilie said on November 15, 2010 at 10:41 pm
    Reply

    lool the div don’t show hope you got it

    Regards

    1. Ilie said on November 15, 2010 at 10:42 pm
      Reply

      after tag and the ad will load the last even after the footer load sow i think it’s a good idea :D and to have the add loaded add ” ” hope Helped

  9. Ilie said on November 15, 2010 at 10:43 pm
    Reply

    after the tag /body !!!!!!!

  10. twatcoders said on January 18, 2014 at 9:58 pm
    Reply

    I wonder if designers will ever realise that putting too many ads on a page does absolutely nothing for click-through when users get so pissed off waiting for the content to load that they just quit the site. Totally counter-productive. As a consumer I totally support the OP.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.