CODEWITHSUNDEEP
javascripthtml
jcmitch
jcmitch

Reputation: 2166

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

Upvotes: 4

Views: 8025

Answers (4)

Sabari
Sabari

Reputation: 6335

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

Upvotes: 2

tkone
tkone

Reputation: 22728

Or listen for DOM ready without jQuery

Upvotes: 1

Starx
Starx

Reputation: 78991

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

Upvotes: 5

Francois
Francois

Reputation: 10978

did you try with JQuery? http://api.jquery.com/ready/

<script>
$(document).ready(pageLoaded)
</script>

Upvotes: 1

Related Questions