Большой css, моргает страница при загрузке в firefox?

Question

[magary4]

Цсс файл - один размером 1М, в хроме все ок, при открытии ее же в фаерфокс - сначала появляется разметка без стилей а дальше происходит трансформация

как победить?

Answer 1

[Сергей Горячев]

Была у меня такая проблема, решилось прелоадером.
В head добавить

<style>
body, html { opacity: 0; }
</style>

и подвесить прелоадер, который бы перекрывал обратно.

<!-- preloader -->
    <style type="text/css">
        .preloader_bg { position: fixed; background: rgba(15,15,15,1); width: 100%; height: 100%; top: 0; left: 0; z-index: 200; }
        .preloader_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 201; font-size: 14px; }
        .preloader_content span { display: block; margin: auto; text-align: center; text-transform: uppercase; color: rgba(225,225,225,1);}
    </style>
    <script type="text/javascript">
    $(function(){
        $('.preloader_bg, .preloader_content').fadeIn(0);
        $(window).load(function(){
            $('body,html').css({ opacity: 1 }); // снимаем прозрачность
            $('.preloader_bg').delay(250).fadeOut(1500);
            $('.preloader_content').delay(250).fadeOut(750);
        });
    });
    </script>
    <div class="preloader_bg"></div>
    <div class="preloader_content">
        <span>Идет загрузка...<br>Подождите...</span>
    </div>
    <noscript>
        <style>
            html, body { opacity: 1 !important; }
            .preloader_bg, .preloader_content { display: none !important; }
        </style>
    </noscript>
    <!-- /preloader -->

Comments

[magary4]

спасибо
взяли это решение

Answer 2

[dom1n1k]

Выделить критичный css-код и грузить его прежде всего. Возможен даже вариант со вставкой его инлайново в html.
А за прелоадеры хочется убивать. Пусть лучше моргает.

Answer 3

[fraky]

если верно увиде - 928Кб.
я бы точно порезал на куски и сначала грузил то, что отвечает за первый экран, остальное - по мере надобности