Jquery Delay Until Background Image Is Loaded, Then Faded In?

I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in co

Solution 1:

This seems an old thread but I found a solution for this. Hope it can help:

$(window).load(function(){
    $('<img/>').attr('src', 'images/imgsrc.png').load(function() {
        $('#loading').fadeOut(500);     
    $('#wrapper').fadeIn(200);
});
});

Solution 2:

Use $(document).load() to achieve what you want.

"I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?"

It is, just before the page has loaded

Solution 3:

Add display: none; to your body tag

<bodystyle="display: none">

Then with jQuery modify your code so it looks like this:

$(img).load(function(){
  $("body").show();
});

Now page content will only show after img loading is complete.

Solution 4:

To check when the image is loaded, declare another, "regular" image (i.e. the <img> tag) with the same src and attach event handler to it. Browser won't load the same image twice, so that event will also mean that the background is loaded.

Another trick I can propose is to go back to "fake" background. In order to make it "tile", you can create an iframe, stretched to cover the whole body, and having that image as background, and then fade that iframe as you like, while the rest of the page remains safely in the "main" frame.