1

I have a website with a lot of heavy front-end features on it, and am making use of a loading gif to ease my loading troubles. I have noticed however, that in Safari particularly (probably since it's a generally slower browser) the background of the loading gif loads and then almost eight seconds later, the gif loads, at which point the rest of the page is done loading and the site appears. This seems like kind of waste of the entire effect.

Is there any way to get this gif to load earlier so that the gif plays BEFORE the rest of the page is loaded?

Here my website: http://bmgz.rtcgraphics.com/

Thanks!

HTML:

<html class="js">
    <body>
        <div id="preloader-gif"></div>
        <!-- the rest of the website -->
    </body>
</html>

CSS:

.js div#preloader-gif {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #333 url(img/ajax-loader.gif) no-repeat center center;
}

JS:

$(document).ready(function(){
    $(window).load(function(){
        $('#preloader-gif').fadeOut('slow',function(){$(this).remove();});
    });
});
Rebecca Cook
  • 111
  • 1
  • 14

1 Answers1

3

Wow, 22mb and over 3 minutes to load. Do you expect anyone not to think their browser has crashed and leave?

Anyway, to get on topic I would think that the problem you are experiencing in Safari is due to the fact that your image is loaded from the stylesheet. So first the browser finds the stylesheet, downloads that and starts parsing it. While that happens, other parts of the html might have been parsed already and other resources might have been enqueued for download before it gets to your gif.

So try putting your loader in a regular img-tag at the top of your body to make sure that it is loaded as soon as possible, you can even put it off screen and then keep using your css solution to center it if you want but the img-tag should ensure that it's loaded as early as possible.

Karl-Johan Sjögren
  • 16,544
  • 7
  • 59
  • 68
  • 1
    yeah...they want two full-page video backgrounds. This project is ridiculous. Thanks for the input!! – Rebecca Cook Aug 06 '14 at 17:43
  • 1
    you might want to consider crunching some of those JPEGs and stuff because the site is currently much less responsive than similar ones – aelgoa Aug 06 '14 at 20:51