Firefox Does Not Handle Jquery $(window).load Properly

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

Solution 1:

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