Call function on body load javascript?

Question

Possible Duplicate:
run function when page is loaded

I have a script inside of my body, a relatively long script, which i would like to put in a seperate .js file, then just call the function on body load instead of having the script in the body but i do not know how to call it. Help?

Script:

            <script type="text/javascript">
            // Set the number of snowflakes (more than 30 - 40 not recommended)
     var snowmax = 35

     // Set the colors for the snow. Add as many colors as you like
     var snowcolor = new Array("#ddddff", "#ccccdd", "#f3f3f3", "#f0ffff")

     // Set the fonts, that create the snowflakes. Add as many fonts as you like
     var snowtype = new Array("Times", "Arial", "Times", "Verdana")

     // Set the letter that creates your snowflake (recommended: * )
     var snowletter = "*"

     // Set the speed of sinking (recommended values range from 0.3 to 2)
     var sinkspeed = 0.6

     // Set the maximum-size of your snowflakes
     var snowmaxsize = 30

     // Set the minimal-size of your snowflakes
     var snowminsize = 8

     // Set the snowing-zone
     // Set 1 for all-over-snowing, set 2 for left-side-snowing
     // Set 3 for center-snowing, set 4 for right-side-snowing
     var snowingzone = 1

     ///////////////////////////////////////////////////////////////////////////
     // CONFIGURATION ENDS HERE
     ///////////////////////////////////////////////////////////////////////////


     // Do not edit below this line
     var snow = new Array()
     var marginbottom
     var marginright
     var timer
     var i_snow = 0
     var x_mv = new Array();
     var crds = new Array();
     var lftrght = new Array();
     var browserinfos = navigator.userAgent
     var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/)
     var ns6 = document.getElementById && !document.all
     var opera = browserinfos.match(/Opera/)
     var browserok = ie5 || ns6 || opera

         function randommaker(range) {
             rand = Math.floor(range * Math.random())
             return rand
         }

         function initsnow() {
             if (ie5 || opera) {
                 marginbottom = document.body.scrollHeight
                 marginright = document.body.clientWidth - 15
             } else if (ns6) {
                 marginbottom = document.body.scrollHeight
                 marginright = window.innerWidth - 15
             }
             var snowsizerange = snowmaxsize - snowminsize
             for (i = 0; i <= snowmax; i++) {
                 crds[i] = 0;
                 lftrght[i] = Math.random() * 15;
                 x_mv[i] = 0.03 + Math.random() / 10;
                 snow[i] = document.getElementById("s" + i)
                 snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)]
                 snow[i].size = randommaker(snowsizerange) + snowminsize
                 snow[i].style.fontSize = snow[i].size + 'px';
                 snow[i].style.color = snowcolor[randommaker(snowcolor.length)]
                 snow[i].style.zIndex = -1;
                 snow[i].sink = sinkspeed * snow[i].size / 5
                 if (snowingzone == 1) {
                     snow[i].posx = randommaker(marginright - snow[i].size)
                 }
                 if (snowingzone == 2) {
                     snow[i].posx = randommaker(marginright / 2 - snow[i].size)
                 }
                 if (snowingzone == 3) {
                     snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4
                 }
                 if (snowingzone == 4) {
                     snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2
                 }
                 snow[i].posy = randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size)
                 snow[i].style.left = snow[i].posx + 'px';
                 snow[i].style.top = snow[i].posy + 'px';
             }
             movesnow()
         }

         function movesnow() {
             for (i = 0; i <= snowmax; i++) {
                 crds[i] += x_mv[i];
                 snow[i].posy += snow[i].sink
                 snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + 'px';
                 snow[i].style.top = snow[i].posy + 'px';

                 if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) {
                     if (snowingzone == 1) {
                         snow[i].posx = randommaker(marginright - snow[i].size)
                     }
                     if (snowingzone == 2) {
                         snow[i].posx = randommaker(marginright / 2 - snow[i].size)
                     }
                     if (snowingzone == 3) {
                         snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4
                     }
                     if (snowingzone == 4) {
                         snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2
                     }
                     snow[i].posy = 0
                 }
             }
             var timer = setTimeout("movesnow()", 50)
         }

     for (i = 0; i <= snowmax; i++) {
         document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>" + snowletter + "</span>")
     }
     if (browserok) {
         window.onload = initsnow
     }
            </script>

You already have `window.onload = initsnow`... what's wrong with it? (FWIW, feature detection is considered to be better than browser detection). — Felix Kling, Jan 16 '13 at 22:00

Halim Qarroum · Answer 1 · 2013-01-16T22:09:07.367

You can use <body onload="aFunction()"> directly using HTML body declaration, or you can do the same thing using jQuery which I find more readable :

$(document).ready(function() {
    aFunction();
});
// This will wait for the DOM (your HTML) to be loaded before executing aFunction

or even doing :

$(window).load(function () {
    aFunction(); 
});
// This will wait for every element in the page (including CSS, JS files ...) 
// to be loaded before executing aFunction

Another advantage of using jQuery instead of legacy Javascript is that your code will be usable accross all the major browsers.

score 3 · Answer 2 · answered Jan 16 '13 at 21:58

3

Create a new file script.js move all your script in it and add it to the document:

<script type="text/javascript" src="script.js"></script>

Then in the file use the onload event:

window.onload = function () {
   all your code goes here.
}

answered Jan 16 '13 at 21:58

Ibu

39,552
10
71
99

score 2 · Accepted Answer · answered Jan 16 '13 at 22:00

As you already have a window.onload assignment at the bottom of your script and the script currently works, I would have thought it would work fine if you just put it in a separate file, then include it with normal script tags in place of the current code.

So just copy the script into snowScript.js then put this line in place of the current code: <script type="text/javascript" src="snowScript.js"></script>

Call function on body load javascript?

3 Answers3