CODEWITHSUNDEEP
javascriptjqueryhtmlcss
asdf
asdf

Reputation: 460

display an alert when body background image has finished loading

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.

Upvotes: 0

Views: 914

Answers (4)

mAguilar
mAguilar

Reputation: 11

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

Upvotes: 0

Alex
Alex

Reputation: 61

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;
}

Upvotes: 0

Prashant Gurav
Prashant Gurav

Reputation: 503

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

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

Upvotes: 1

Matúš Bartko
Matúš Bartko

Reputation: 2457

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?

Upvotes: 2

Related Questions