Reputation: 69
I'm trying to pass and change the value of a global variable into $(window).load and $(document).ready using jQuery
Why doesn't the following code generate an alert box containing the value 'aaa'? - How do I make this happen?
I need to count the number of elements that have a certain class when the document loads, then when the page is ready, use the value to carrout an action.
var globalVariable = 'somevalue';
$(window).load(function() {
globalVariable = 'aaa';
})
$(document).ready(function() {
// globalVariable = 'bbb';
alert(globalVariable);
})
EDIT: How would you detect if an element is currently being hovered on, or has a certain class whilst the page is loading, then carry out an action upon the page being ready, depending on if the class exists or the element is currently being hovered over?
Upvotes: 1
Views: 4333
Reputation: 318252
You are passing it, but window.onload
generally fires after document.ready
, which is why it isn't changed.
From the documentation for ready
While JavaScript provides the
window.onload
event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received.In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed.
var globalVariable = 'somevalue'; // executes first, sets the variable
$(window).load(function() { // executes last, when all assets are loaded
globalVariable = 'aaa';
});
$(document).ready(function() { // executes second, alerts 'somevalue'
alert(globalVariable);
});
I need to count the number of elements that have a certain class when the document loads, then when the page is ready, use the value to carrout an action.
It seems like all you should really need is
$(function() {
var number_of_elements = $('.class').length;
});
there's no need to wait for window.onload
to count elements.
How would you detect if an element is currently being hovered on, or has a certain class whilst the page is loading, then carry out an action upon the page being ready, depending on if the class exists or the element is currently being hovered over?
$(function() {
$(document).on('mousemove', function(e) {
if ( $(e.target).is('.someClass') && $('.some_other_class').length ) {
// do stuff
}
// remember to remove this handler once done
});
});
I think this is as close as you'll get, as you can only capture the hovered element once the mouse moves.
This will check:
e.target
, matches something, in this case a class.some_other_class
currently in the DOMUpvotes: 4
Reputation: 33870
$(document).ready
wait until all element are place on the DOM before triggering.
$(window).load
wait until all elements are loaded in the DOM (images finish loading).
Therefor, the document ready method will always trigger before the window load because element are placed in the tree then they are loaded
Upvotes: 1