window.load和document.ready的Javascript代码可用性

Question

I need a function that needs to be executed on document.ready and available to window.onload function ...

How can I do that?

$(document).ready(function someFunction() {
    execute something and pass the results to window.load
}
);


$(window).load(Need results of somefunction);​

Answer 1

You can share the result of a function call by assigning it to some variable in scope.

(function(){
   var result;
   $(document).ready(function(){
      result = 'something';
   });

   $(window).load(function() {
       console.log(result); //something
   });

}());

Answer 2

When passing a function() parameter to things like $(document).ready(fn) , you are actually creating an unnamed function, an anonymous function. So, if you want to get the same result for both $(document).ready and $(window).load , you can create a named function (this is if you want to share the function itself):

function someFunction() {
    /* execute some code */
}

$(document).ready(someFunction);
$(window).load(someFunction);

Since I see that I've misunderstood your question firstly, let me solve that.

Having a variable in the scope of both functions will alow both of them to use it. So, since having a variable in the global namespace it's not a good practice, then we should use an unnamed functions to wrap your two functions inside it:

(function(){
  var accessible_var;
  $(document).ready( function() {
    accessible_var = "passed to load handler";
  } );

  $(window).load( function() {
    console.log(accessible_var);
  } );
})();

You have to take care with these two handlers!

document.ready will fire when all the elements are in place, and they can be referenced in the JS code, but the content is not necessarily loaded.

The window.load , however will wait for the page to be fully loaded, this includes inner frames, images etc.

Warning - If you want to use the Height, Width properties of an image for example, then document.ready is a deal braker!!

(as it is written here )

Answer 3

Since you need to do something on dom ready, then access it on window load, nest the window load binding method inside the dom ready method.

$(document).ready(function () {
    // do something
    var somevar = "Hello World!";
    $(window).on("load", function () {
        console.log(somevar); // Hello World!;
    });
});