加载gif加载时间太长

Question

我的网站上有很多繁重的前端功能，并且正在使用加载gif来减轻加载麻烦。 但是我注意到，特别是在Safari中（可能是因为它通常是较慢的浏览器），加载gif的背景加载，然后将近八秒钟后，gif加载，此时页面的其余部分已加载完毕，并且网站出现。 这似乎是整个效果的浪费。

有什么方法可以让此gif较早加载，以便在加载页面的其余部分之前播放gif？

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

谢谢！

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();});
    });
});

Answer 1

哇，22mb，加载时间超过3分钟。 您是否希望有人不要认为他们的浏览器已崩溃并离开了？

无论如何，要成为话题，我认为您在Safari中遇到的问题是由于图像是从样式表加载而来的。 因此，首先浏览器找到样式表，然后下载并开始对其进行解析。 发生这种情况时，html的其他部分可能已经被解析，并且其他资源可能已排队下载，然后才能下载到gif。

因此，请尝试将加载程序放置在身体顶部的常规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