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-tag应该确保它尽早加载。

加载gif需要太长时间才能加载

1 个答案: