load javascript after loading the page

Question

I have read a lot of topics and tried a lot of stuff but I can't get what I want. I just moved my js code at the end of the page and now I get some errors.

This is how my page looks like:

<html>
   <head>
      bla bla
   </head>
<body>
   bla bla
   <div class="advertising">
      <script type="text/javascript" defer="defer">
          window.onload = adsense();
      </script>
      <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
      </script>
   </div>

  <script language="javascript" type="text/javascript" src="fonctions.js"></script>
</body>
</html>

In fonctions.js I have my google adsense code:

 function adsense(){
    <!--
    google_ad_client = "pub-xxxxx";
    /* 120x600, date de création 11/06/11 */
    google_ad_slot = "xxxxx";
    google_ad_width = 120;
    google_ad_height = 600;
    //-->
    }

The idea was to have the same code for adsense at only one place but I can't get it to load after the file fonctions.js

I tried defer="defer", window.onload ...

Any ideas? Thanks

I get this error in Firebug: Error : adsense is not defined

PS: I would like to avoid to use Jquery (to avoid making pages too big)

UPDATE:

<script type="text/javascript" defer="defer">
        (function() {  // 'sandbox' javascript pattern to prevent clobbering
                       // global namespace
            var executeProxy = function() {
                if (typeof adsense === 'function') {  // adsense is configured
                    adsense();
                } else {  // adsense is not configured;
                          // therefore, try again later
                    setTimeout(executeProxy, 50);
                }
            };
            executeProxy();
        }());
    </script>
    <script language="javascript" type="text/javascript" src="fonctions.js"></script>

in fonctions.js if I put the following code, the "ok" is displayed:

function adsense(){
alert ("ok");
}

However if I have this code, the ad is not displayed:

function adsense(){
google_ad_client = "pub-xx";
/* 120x600, date de création 16/04/11 */
google_ad_slot = "xxx";
google_ad_width = 120;
google_ad_height = 600;
}

My guess is that it's a Google issue... The code cannot be loaded in this way...? If I put the adsense code in the page (below the call - where you do alert('here'); ) it is well displayed... So my adsense code is correct

UPDATE: I have finally changed the solution, I've put the code in a .html file and I include it using php. So it's not in my js file anymore. Thanks for your help anyway.

@greengit It's better, now the error disappeared but the add is not displayed on the page — remyremy
– remyremy, Commented Dec 5, 2011 at 19:01

Ryan · Accepted Answer · 2011-12-05 22:38:24Z

window.onload expects a function callback; however, you are executing adsense with adsense(), and adsense doesn't return a function; therefore, window.onload will discard that. Change to:

    window.onload = adsense;

UPDATE

The above answer should be discarded, but I'm leaving it up so that people can know that window.onload expects a function callback :)

Keep in mind that defer on the script element will instruct the browser to wait until the page has been loaded to execute the script; however, your fonctions.js is in the src attribute of your last script tag; therefore, your deferred script will most likely execute before adsense has been defined, because the browser will make an http request to retrieve your script. This will allow deferred scripts to continue executing while adsense is not defined. Try this in place of your original deferred script:

    <script type="text/javascript" defer="defer">
        (function() {  // 'sandbox' javascript pattern to prevent clobbering
                       // global namespace
            var executeProxy = function() {
                if (typeof adsense === 'function') {  // adsense is configured
                    adsense();
                } else {  // adsense is not configured;
                          // therefore, try again later
                    setTimeout(executeProxy, 50);
                }
            };
            executeProxy();
        }());
    </script>

UPDATE

I forgot that script defer is not supported in anything outside of IE. Therefore, the deferring issue should not be at play here; however, I tested the following code in FF and Chrome, and it works:

    <script type="text/javascript" defer="defer">
        (function() {  // 'sandbox' javascript pattern to prevent clobbering
                       // global namespace
            var executeProxy = function() {
                if (typeof adsense === 'function') {  // adsense is configured
                    adsense();
                } else {  // adsense is not configured;
                          // therefore, try again later
                    setTimeout(executeProxy, 50);
                }
            };
            executeProxy();
        }());
    </script>
    <script type="text/javascript">
        function adsense() {
            alert('here');
        }
    </script>

Thanks for you help but that still doesn't work. If I put a alert("ok"); just after adsense(); it's displayed but the ad is still not displayed. However if I insert my fonctions.js before that script, the ad is displayed...
can you show the actual code in question as you have it in your environment? When I say the actual code, I mean the code the html portions that you have updated that are actually there while you're having problems.

SLaks · Accepted Answer · 2011-12-05 18:51:36Z

1

window.onload = adsense(); calls adsense() immediately and assigns its return value to onload.

answered Dec 5, 2011 at 18:51

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

load javascript after loading the page

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related