Выполнить скрипт до загрузки css
При загрузки страницы некоторые стили должны подгружаются из скрипта. Нужно сделать так, чтобы это происходило до загрузки основных css. Иначе загрузка страницы происходит скачком. В качестве костыля добавил прелоадер до срабатывания функции $(document).ready(function(), но возможно есть более грамотный вариант?
.content {
transform: scale(1);
}
$(document).ready(function() {
...
$('.content').css({ 'transform' : 'scale(' + scale + ') });
}
Ответы (1 шт):
Можете подгружать основные 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);
}