CODEWITHSUNDEEP
javascriptjqueryadsdocument.write
Technoh
Technoh

Reputation: 1600

How can I load ad code last on the page or asynchronously if the ad uses document.write?

I am helping out with a website and we are having issues with page load time because of the ads that sometimes take a few seconds to load. Since the ads are called using < script> tags the browser stops parsing the page until the ads are fully loaded. What we are looking for is a way to load the ads from the client side so that the page can be displayed entirely and then the ads will start loading, thus greatly improving user experience.

I have tried a lot of things to get this to work but no solution actually shows the ads. You can see the site at http://magic.tcgplayer.com/. There is one ad as a banner, at the top of the page, and another one in the right "column". Both ads are loaded using < script> tags. I have tried to load using lazy loading javascripts but they didn't work. I have tried using the writeCapture.js (an excellent script by the way) but the ads don't load. I looked at the bezen.org and labjs.com solutions but I'm not sure how to apply the ideas from those resources. Also note that the ad script is on a remote server and cannot be copied to our server.

Any help is greatly appreciated.

Upvotes: 0

Views: 1216

Answers (3)

gdj
gdj

Reputation: 1295

Put the ad in an iframe. The iframe should load the JavaScript with document.write().

Upvotes: 1

Technoh
Technoh

Reputation: 1600

Since things evolved it is now possible to use the defer or async attribute.

I load my scripts with async but defer is safer for older browsers.

See W3 Schools which contains details for both async and defer.

Upvotes: 0

unionx
unionx

Reputation: 437

I try to find some way to async load google ad too, and I find it.

A big site douban use iframe to hold the js and async load iframe.

This is the js code:

function google_ad() {
    function createIframe() {
        var ad_frame = document.createElement("iframe");
        ad_frame.src = "/js/google_ad.htm";
        ad_frame.id = "google_ad_frame";
        ad_frame.scrolling = "no";
        ad_frame.width = "260px";
        ad_frame.height = "260px";
        document.getElementById("google_ad").appendChild(ad_frame);
    };

    if (window.addEventListener) {
        window.addEventListener("load", createIframe, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", createIframe);
    } else {
        window.onload = createIframe;
    }
}

And this is the code for iframe, which is from google adsense:

<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'>
</script>
<script type='text/javascript'>
    GS_googleAddAdSenseService("ca-pub-1281485759256908");
    GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
    GA_googleAddSlot("ca-pub-1281485759256908", "ad_right");
</script>
<script type='text/javascript'>
    GA_googleFetchAds();
</script>

<script type="text/javascript">
    GA_googleFillSlot("ad_right");
</script>

So, I just use this:

<div id="google_ad" style="margin-top:20px;text-align:center;border:solid 17px #FFFFFF;">
    <script type="text/javascript">google_ad();</script>
</div>

And, it loads the frame.

Upvotes: 2

Related Questions