0

При загрузки страницы некоторые стили должны подгружаются из скрипта. Нужно сделать так, чтобы это происходило до загрузки основных css. Иначе загрузка страницы происходит скачком. В качестве костыля добавил прелоадер до срабатывания функции $(document).ready(function(), но возможно есть более грамотный вариант?

    .content {
      transform: scale(1);
    }
        $(document).ready(function() {
           ...
           
           $('.content').css({ 'transform' :  'scale(' + scale + ') }); 
        }

1 ответ 1

0

Можете подгружать основные CSS файлы после выполнения нужного вам кода внутри JS. Но это не избавит вас от сдвига макета полностью и увеличит скорость загрузки вашей страницы, что очень плохо отразится на UX и рейтинге сайта у поисковых систем, если вы весь основной СSS код будете грузить динамически. Лучше разбить ваш CSS на части и загружать динамически только тот кусок, который вызывает наибольший сдвиг макета, если это возможно с вашим кодом CSS.

const cssId = 'main-css';  // здесь ID
if (!document.getElementById(cssId)) {
    const head  = document.getElementsByTagName('head')[0];
    const link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://website.example/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

2
  • Спасибо! Буду думать в этом направлении.
    – Satkos
    5 дек 2022 в 17:08
  • Если вам пригодилось, отметьте как-то ответ, что он полезный был ) @Satkos 5 дек 2022 в 18:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.