Difference between Jquery $(window).load vs window.onload

Question

I have the following code:

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(53.743317, -0.331004),
    zoom: 12
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"),  mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?key={APIKEY}&sensor=false&callback=initialize';
  document.body.appendChild(script);
}

If I put

$( window ).load(function() {
    loadScript;
});

It won't load my map. Error in google maps js is Uncaught TypeError: Object #<Object> has no method 'Load'. However if I use

window.onload = loadScript;

It will load it in fine. I have absolutely no idea why.

$(window).load(loadScript());

Also works, just having it as a function that calls it doesn't. Could you tell me the reason of this behavior?

NB: $( window ).load(function() { loadScript(); }); doesn't work either — j-dexx
– j-dexx, Commented Mar 5, 2014 at 12:29
On Jsfiddle your code seems work in the same way: jQuery: link - window.onload link — CodeCarvings
– CodeCarvings, Commented Mar 5, 2014 at 12:59
On jsfiddle it won't work because my API key won't let it so I don't know how you can say they work the same way $(window).load(loadScript()); Works, but putting it in a function doesn't. I really don't understand this — j-dexx
– j-dexx, Commented Mar 5, 2014 at 13:17
Sorry for the misunderstanding, what I wanted to say is that both code snippents on jsFiddle "do not work" in the same way... :-) However I confirm that the same code snippets, on my local pc, with my onw Google API key work without any problem (I have 2 maps of "Hull" in front of me in this moment...) — CodeCarvings
– CodeCarvings, Commented Mar 5, 2014 at 13:32
That's odd, maybe it's a rails jquery thing then rather than a normal jquery thing. I'm interested as to why it's different more than anything. Thanks for your help — j-dexx
– j-dexx, Commented Mar 5, 2014 at 13:47

Alnitak · Accepted Answer · 2014-03-05 12:48:31Z

2

You haven't actually invoked loadScript in the $(window).load() version - you've just created a "void" expression that evaluates to a reference to that function.

Do either:

$(window).load(function() {
     loadScript();  // NB: parentheses
})

or:

$(window).load(loadScript);

That said, you perhaps want $(document).ready() rather than $(window).load()

edited Mar 5, 2014 at 12:48

answered Mar 5, 2014 at 12:25

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yang Over a year ago

@Baloo This is because your Jquery isn't loaded. Just try alert(typeof $) and you'll see that

j-dexx Over a year ago

I get the alert saying it's a function, I assume that means it's loaded. Feel free to tell me if I'm wrong though.

CodeCarvings · Accepted Answer · 2014-03-05 12:26:51Z

0

in your jquery script you don't invoke the loadScript method... Use:

$( window ).load(function() {
    loadScript();
});

answered Mar 5, 2014 at 12:26

CodeCarvings

3341 silver badge3 bronze badges

Comments

Rajendraseo Pandey · Accepted Answer · 2015-03-15 07:29:36Z

-1

The $(window).load execute when all DOM is ready including images. That means if our web page has completely loaded including image then $(window).load function will call.

$(window).load(function() {

 // script

})

for more detail about $(document).ready vs $(window).load vs window.onload click on

http://www.delhincrjob.com/blog/what-is-document-ready-vs-window-load-vs-window-onload/

answered Mar 15, 2015 at 7:29

Rajendraseo Pandey

11 bronze badge

Collectives™ on Stack Overflow

Difference between Jquery $(window).load vs window.onload

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related