Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Background Image OnLoad

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()">
like image 762
jcmitch Avatar asked Oct 12 '25 08:10

jcmitch


2 Answers

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();

like image 180
Starx Avatar answered Oct 13 '25 22:10

Starx


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 :)

like image 45
Sabari Avatar answered Oct 13 '25 21:10

Sabari