Broken preloaded, only appears after page has been loaded, only happening in Chrome

Question

I'm working on a website LINK and for some reason, the pre-loader is broken. I'm working with some big images that should scale up to any screen (awful for FPS..) and therefor I'm using very large pictures (using media queries to server 1440p and above, everything below gets 1080p images). To prevent users seeing white space, when the images haven't loaded, i'm using a pre-loader fixed full-screen div with a circular animation that fades out until the content has been loaded.

The pre-loader I've made has two conditions:

1. Be fixed on the screen until the whole page is loaded. Then fade out
2. Be at least .5s on the screen, even if the page is loaded quicker than .5s and then fade out in .5s

The code for this is

$(document).ready(function () {
    setTimeout(function () {
        $('.loading').css('opacity', '0');
    }, 500);
    setTimeout(function () {
        $('.loading').remove();
    }, 1500);
});

CSS for the fixed div in front of the content
.loading {
position:fixed;
top:0;
left:0;
z-index:9999;
width:100%;
height:100%;
background-color:#1abc9c;
transition:.5s;

}

This seems fine for all browsers, however for Chrome where the page gets loaded, than after .5s after the page has been loaded, the pre-loader flashes in and quickly fades out.

If the pre-loader could talk, it would probably say on Chrome "Hey wait, I should appear before you all! Ah well, never mind.".

So anyway, I'm looking for a decent solution of a pre-loader that:

1. stay fixed above all content until all the content (including background-images) have been loaded and then
2. fade out with a animation duration of .5s.
3. with a minimum 'stay-on-screen' time of .5s, even when all the content have been loaded quicker than .5s.

Who can help? :)

Answer 1

You should include the property of what you wish to be transitioned in your style (in this case opacity, or all), and depending on browser versions, include multi-browser prefixes:

.loading {
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
}

You may also be able to achieve the same result in a better way using jQuery, and remove the transition:

$('.loading').delay(500).fadeOut(500, function() {
    $(this).remove();
});

Another thing to point out is that the hi-res image won't necessarily have loaded within .5 seconds. Here's a good way of checking if the image has loaded: SO