display an alert when body background image has finished loading

Question

hey there i have the following code that sets and scales the background image in the body tag...

html,body {

    margin:0;
    padding:0;
    height:100%;
    background-image:url(some image);
    background-size:100% 100%;
    -webkit-background-size:100% 100%;        /*  Safari  */
    -khtml-background-size:100% 100%;         /*  Konqueror  */
    -moz-background-size:100% 100%;          /*  Firefox  */
    background-repeat:no-repeat;
    background-attachment:fixed;
    overflow:hidden;

}

what i want to do is display an alert when the image in the body finishes loading or maybe when the whole page finishes loading.. however, i've found this fiddle and this stackoverflow question on the net but it doesn't seen to fit my situation. thanks.

Use window load for doing stuff when the page finishes loading — Huangism, Jul 28 '14 at 17:54

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

If you are using jquery, this wait until whole page is loaded and then run code:

$(window).load(function() {
    alert( "css and graphic is loaded." );
});

There is no load event on background images, but there is this plugin that can detect them: https://github.com/alexanderdickson/waitForImages

also you can chceck this similar question: How can I check if a background image is loaded?

edited May 23 '17 at 12:29

Community

1
1

answered Jul 28 '14 at 17:55

Matúš Bartko

2,425
2
30
42

score 1 · Answer 2 · answered Jul 28 '14 at 17:57

1

$(window).load(function() {
 alert("Css has been loaded/ Loaded");
});

This executes after your all css and js code executes completely.

answered Jul 28 '14 at 17:57

Prashant Gurav

505
7
17

Alex · Accepted Answer · 2014-07-28T18:01:23.637

0

Try this. When all your content was loaded this event will trigger

$(window).load(function() {
 alert('loaded')
});

And btw u can optimize your css

html,body {
    margin:0;
    padding:0;
    height:100%;;
    background-size:100% 100%;
    -webkit-background-size:100% 100%;        /*  Safari  */
    -khtml-background-size:100% 100%;         /*  Konqueror  */
    -moz-background-size:100% 100%;          /*  Firefox  */
    background: url(someImage) no-repeat fixed;  
    overflow:hidden;
}

edited Jul 28 '14 at 18:01

answered Jul 28 '14 at 17:53

Alex

61
4

2

Might want to fix your brackets – Huangism Jul 28 '14 at 17:54

score 0 · Answer 4 · answered Jul 28 '14 at 18:05

0

You can do this with the imagesloaded jQuery plugin, and just add

$('body').imagesLoaded(function(){ alert('LOADED'); });

this works for when all images within body load.

DEMO

answered Jul 28 '14 at 18:05

mAguilar

11
3

display an alert when body background image has finished loading

4 Answers4