HTML Background Image OnLoad

Question

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

Use window.onload in place of body.onload, as mentioned here: http://stackoverflow.com/questions/1033398/execute-javascript-when-page-has-fully-loaded — Mike Guthrie, Mar 02 '12 at 18:26

score 5 · Accepted Answer · answered Mar 02 '12 at 18:27

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

score 2 · Answer 2 · answered Mar 02 '12 at 18:29

2

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

answered Mar 02 '12 at 18:29

Sabari

6,205
1
27
36

You need to enable the `waitForAll` option for the plugin to consider background images. – alex Mar 15 '12 at 11:28

score 1 · Answer 3 · answered Mar 02 '12 at 18:24

1

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

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

answered Mar 02 '12 at 18:24

Francois

10,730
7
47
80

I think you want `$(document).load(pageLoaded);` http://api.jquery.com/load-event/. This attaches a function to the event that occurs when images and other elements on the page have loaded. – dangerChihuahua007 Mar 02 '12 at 18:27

score 1 · Answer 4 · answered Mar 02 '12 at 18:27

1

Or listen for DOM ready without jQuery

answered Mar 02 '12 at 18:27

tkone

22,092
5
54
78

HTML Background Image OnLoad

4 Answers4

Linked