加载gif加载时间太长

Question

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. 我的网站上有很多繁重的前端功能，并且正在使用加载gif来减轻加载麻烦。 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. 但是我注意到，特别是在Safari中（可能是因为它通常是较慢的浏览器），加载gif的背景加载，然后将近八秒钟后，gif加载，此时页面的其余部分已加载完毕，并且网站出现。 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? 有什么方法可以让此gif较早加载，以便在加载页面的其余部分之前播放gif？

Here my website: http://bmgz.rtcgraphics.com/ 这是我的网站： http : //bmgz.rtcgraphics.com/

Thanks! 谢谢！

HTML: HTML：

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

CSS: 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: JS：

$(document).ready(function(){
    $(window).load(function(){
        $('#preloader-gif').fadeOut('slow',function(){$(this).remove();});
    });
});

Answer 1

Wow, 22mb and over 3 minutes to load. 哇，22mb，加载时间超过3分钟。 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. 无论如何，要成为话题，我认为您在Safari中遇到的问题是由于图像是从样式表加载而来的。 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. 发生这种情况时，html的其他部分可能已经被解析，并且其他资源可能已排队下载，然后才能下载到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. 因此，请尝试将加载程序放置在身体顶部的常规img标签中，以确保尽快加载它，甚至可以将其移出屏幕，然后根据需要继续使用CSS解决方案将其居中放置， img标签应确保尽早加载。

加载gif加载时间太长

问题描述

1 个解决方案

解决方案1
1 2014-08-06 17:21:55

加载gif加载时间太长

问题描述

1 个解决方案

解决方案1 1 2014-08-06 17:21:55

解决方案1
1 2014-08-06 17:21:55