0

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? :)

Sander Schaeffer
  • 2,528
  • 7
  • 25
  • 52

1 Answers1

0

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

Community
  • 1
  • 1
jackfrankland
  • 1,972
  • 1
  • 11
  • 11
  • Thanks! Will try and report back ASAP. :) – Sander Schaeffer Apr 29 '14 at 08:57
  • Bonus points for the easy Javascript part! Thank you kindly. I'm having a bit of problems though looking at the code you linked to, because, as far as I know, the code only checks for a single image, or does the function inside .one() gets executed once all objects targeted by the selector `img` are `.complete`? If so, then I could copy the code and append `.destroy()` inside of it. Or where am I going wrong? Thanks very much in advance! – Sander Schaeffer May 05 '14 at 13:45
  • @SanderSchaeffer Glad to have helped! The code I've linked to will apply to every instance of an image tag individually. Are you looking to detect when all images have loaded before removing the loading overlay? This [plugin](https://github.com/desandro/imagesloaded) may help also. – jackfrankland May 05 '14 at 16:38