How to tell whether the $(window).load()/window.onload event has already fired?
Solution 1
You could try setting up a handler that's invoked via a timeout that will check the images to see if their properties are available. Clear the timer in the load
event handler so if the load event occurs first, the timer won't fire. If the properties aren't available, then the load event hasn't fired yet and you know that your handler will eventually be invoked. If they are, then you know that the load event occurred before your handler was set and you can simply proceed.
Pseudocode
var timer = null;
$(function() {
$(window).load( function() {
if (timer) {
clearTimeout(timer);
timer = null;
}
process();
});
timer = setTimeout( function() {
if (checkAvailable())
process();
}
}, 10*1000 ); // waits 10 seconds before checking
});
function checkAvailable()
{
var available = true;
$('img').each( function() {
try {
if (this.height == 0) {
available = false;
return false;
}
}
catch (e) {
available = false;
return false;
}
});
return available;
}
function process() {
... do the real work here
}
Solution 2
I wrote a plugin that may be of some use: http://plugins.jquery.com/project/window-loaded
Solution 3
You guys should read this:
Solution 4
I think your problem would resolve itself if you'd use $(document).ready instead of $(window).load - see the jquery documentation.
Related videos on Youtube
DismissedAsDrone
Updated on July 09, 2022Comments
-
DismissedAsDrone almost 2 years
I have a script that is being inserted dynamically via another script. The code in that script is wrapped inside the
$(window).load()
event because it requires the images on the page to have all loaded. In some browsers it works fine, but in others it seems not to fire because the page has already finished loading by the time the code is run.Is there any way to check and see whether the page has already finished loading - either via jQuery or JavaScript? (including images)
In this situation, I don't have access to the
onload
event of the original document (aside from altering it via the loaded script - but that would seem to present the same problem).Any ideas/solutions/advice would be greatly appreciated!
-
user3391801 about 15 yearsJust a snippet from the docs linked: In a nutshell, this is a solid replacement for using window.onload...your bound function will be called the instant the DOM is ready to be read and manipulated, which is when 99.99% of all JavaScript code needs to run.
-
DismissedAsDrone about 15 yearsThis is accomplishes pretty much what I was looking to do. Just tweaked it a bit to fire the timer at short intervals instead of waiting 10 seconds. Thanks!
-
trusktr about 13 yearsCool! So does this work if I use .load() to get content, and if there happens to be images that need to load, will
$.windowLoaded(/*dostuff*/)
execute the callbackafter new images are loaded??? -
trusktr about 13 yearsI solved the problem by simply using addEventListener to add functions to window.onload and for each call to jquery's .load() method setting a variable to true so it can be detected in subsequent additions to window.onload... if that makes any sense...