Firefox does not handle jQuery $(window).load properly

Question

Having a div#all with background, I want it to fade in onLoad. Chrome and IE honors the window.load, whereas Firefox does not. Firefox waits the amount of time in fadeIns (1500+500) and then displays the contents without any effect

CSS

body {
    display: none;
}

#all{
     background: url('../bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

HTML

<body>

<div id="all">
All contents here  

 <div id="home" style="display:none">Content</div>

</div>

</body>

jQuery

$(window).load(function() {
    $("body").fadeIn(1500,function(){
        $('#home').fadeIn(500);
   });
});

*Note*: This is happening only when bg.jpg is not cached, i.e. after hitting ctrl+f5 or visiting the page for the first time — DimitrisD, Dec 24 '13 at 16:39
you have to wait for the bg image is loaded. $('img').load(). the window is loaded before your image is loaded. — kasper Taeymans, Dec 24 '13 at 16:45
JSFiddle? Can you add console.log to see where it's not hitting? — NoBugs, Dec 25 '13 at 04:48
It would be awesome to see a js fiddle with real images and content that replicated the problem. That would make it easier to diagnose. Because, honestly, this could be related to image file size, text color, differences between browser event handling, etc. It's hard to know this one for sure without seeing it. — rescuecreative, Dec 25 '13 at 04:48
http://jsfiddle.net/M3AF5/1/ But is not reproducible in JSFiddle... — DimitrisD, Dec 25 '13 at 17:58

score 3 · Accepted Answer · edited May 23 '17 at 10:27

It seems the text fades in correctly, it's just the background-image that suddenly pops up because it's not cached and firefox started before it was loaded.

Taking a cue from "How can I check if a background image is loaded?"

$(window).load(function() {
    $('<img/>').attr('src', '../bg.jpg').load(function() {
        $(this).remove();

        $("body").fadeIn(1500,function(){
            $('#home').fadeIn(500);
        });
    });
});

This way it first waits for the background image to load before starting the fade-in.

(NB Without the image-load check it didn't work well on Chrome for me either.)

Firefox does not handle jQuery $(window).load properly

1 Answers1

Linked