I have a simple HTML page with a little JavaScript in it. The JavaScript launches onLoad in the body. The body also has a background image. The JavaScript launches before the background image is loaded. Is there a way to have the body onLoad wait for the body background image to load?
<body background="http://xxx.com/xxx.jpeg" id="myBody" onload="pageLoaded()">
If you want to make sure a script launches after all the images have been loaded, then use
$(window).load(function() {
//.......................
});
This event, will only fire once all the scripts, css, js, images have been load, unlike $(document).ready();
You can try with
jQuery(window).load(function() {
//your code here
});
jQuery(document).ready(function() {
//your code here
});
But i don't think whether it will consider background image loading. A more efficient way will be to use this jQuery plugin:
https://github.com/alexanderdickson/waitForImages
You can make the jQuery function call like :
jQuery('body').waitForImages(function() {
//your code here
});
Hope this helps you :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With