9

I'm a newbie and i'm playing around trying to achieve something using javascript.

I have a function which i need to take effect once my page loads but i don't want to use <body onload="init()" is there another alternative?

            <script type="text/javascript">
            function init() {
            container = document.createElement('div');
            <script>

            <body onload="init()">

            </body>
Chima
  • 172
  • 1
  • 14
  • 1
    You can use jQuery, and use the $(document).ready(handler) function, which will execute the function handler when the DOM is loaded. –  Nov 20 '15 at 19:07
  • You should make it happend right in your javascript. Take a look [here](http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) – AndreaM16 Nov 20 '15 at 19:12
  • 1
    Possible duplicate of [Difference between DOMContentLoaded and Load events](http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events) – Matías Fidemraizer Nov 20 '15 at 19:12
  • 1
    @ZachPerkitny - the document ready is a different event than window.load and is fired earlier. – Mark Schultheiss Nov 20 '15 at 19:22

4 Answers4

10

Call it from a load handler:

function init() {
  container = document.createElement('div');

  // ...
}

window.addEventListener("load", init);
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
  • `document.addEventListener('DOMContentLoaded',init);` is another solution that you can use. Check this [Test runner](http://jsperf.com/onload-vs-domcontentloaded/5#runner) for performance – Mahmoud Nov 20 '15 at 20:16
2

You can also do:

window.onload = function() {
 init();
}
defau1t
  • 10,593
  • 2
  • 35
  • 47
  • You can, but that's very poor form, it will wipe out any onload event handler already set. – blm Nov 20 '15 at 19:09
  • 1
    Since this is on load hence nothing is wiped out. But off course the better approach is window.addEventListener("load", init); – defau1t Nov 20 '15 at 19:11
  • window.addEventListener("load", init); this worked for me. But now I need to add this to a magento site m working on but its not displayig. I checked the source code and i can see the codes there anyhelp? – Chima Nov 22 '15 at 20:56
1

Well, you can use jquery, but you have to include it in your head manaully or with

<!-- Google CDN -->

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

if you want to use Google CDN, or 

<!-- Microsoft CDN -->

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>

for Microsoft CDN. Now, you can use jquery in your webpage. So write in your head

<script type="text/javascript">
 $(window).on('load",function(){
   // your code
 });
</script>

Of course, you need to know how to use jquery to use this solution. However, you can use javasript too, but I suggest you to start learning jquery: is very useful.

<script>
  window.onload = function() { 
    //your code
  }
</script>

This should be the right way ;)

REALLY IMPORTANT: this functions are called when your document is starting loading! If you want to apply something at the end of the loading of the page (better solution to improve loading speed) use 

$(document).ready(function(){
 //your code
});

in jquery, or

document.addEventListener("DOMContentLoaded", function(event) { 
  //your code
});

in javascript

fedetibaldo
  • 162
  • 2
  • 14
  • 1
    `$(document).ready(function(){ `is NOT the same as `$(window).on('load",function(){` the latter fires later – Mark Schultheiss Nov 20 '15 at 19:31
  • Yeah, that's true. Well... it works really well too, doesn't it? EDIT: I'm adjusting EDIT2: updated, thank you for your feedback: I wouldn't notice that – fedetibaldo Nov 20 '15 at 19:33
  • http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events - not saying in practice it is not better but here the OP asks for a replacement for the `onload` handler – Mark Schultheiss Nov 20 '15 at 19:35
  • okk, found the right alternative: window.onload = function() {}, isn't it? – fedetibaldo Nov 20 '15 at 19:39
  • same as `window.addEventListener("load", init);` as far as event it handles – Mark Schultheiss Nov 20 '15 at 19:51
  • perfect ;) if you find my answer complete and useful, please rate it positive. I'm new in this comunity and I don't have a great reputation at the moment (and a big knowledge of english too :D ) – fedetibaldo Nov 20 '15 at 19:55
-3

I am new in programming but i think u can do something like this: With Jquery 

$(document).ready(function(){
   // code loaded..
});

Without Jquery

// this code is bad to practise
    <script type="text/javascript">
        function init() {
            // Put your code here
        }
        window.onload = init;
    </script>
Phoenix
  • 467
  • 1
  • 11
  • 23