Загрузите css с document.createElement ("link"), но ДО ТОГО, что HTML загружен [дубликат]

На этот вопрос уже есть ответ:

Я хочу загрузить таблицу стилей через JS, но загружает async, тем самым показывая, что страница плохого формата из-за отсутствия css

если я использую document.writeпредупреждение отладчика, Violation! avoid using document.writeно он гарантирует загрузку css до того, как остальная часть html будет отображаться

Итак, как я могу получить загрузку css через js до того, как остальная часть html будет отображаться без document.write?

Я попытался установить async false и отложить false, но результат был таким же ... html получил рендеринг, прежде чем css можно было загрузить с помощью JS document.createElement("link");

javascript,html,css,html,

0

Ответов: 1

0

2-е обновление

В дублирующих ответах четко договориться о том , что единственный способ, кроме document.write, чтобы изначально скрыть содержимое и показать его после загрузки страницы.

Также в этом посте есть несколько замечательных замечаний, в которых говорится:

Браузеры делают части на странице, как только они удобны, у них достаточно информации для этого, и это хорошо. Десять лет назад люди, которые спрашивали противоположное тому, что вы хотите, когда дело доходило до длинных сроков рендеринга за их огромные столы ... - CBroe

Учитывая вышеизложенное, я решил оставить свой ответ ниже, поскольку в дублированном сообщении нет решения на основе CSS, следовательно, IMHO, ниже приведен лучший подход к вашей конкретной проблеме.

Оригинальный ответ

Самое близкое, что я могу придумать, - сделать что-то подобное в вашем <head>теге

<script type='text/javascript'>
    var d = document;
    var s = d.createElement('link');
    s.setAttribute('type', 'text/css');
    s.setAttribute('href', '/path-to-css.css');
    d.getElementsByTagName('head')[0].appendChild(s);
</script>

Если HTML все еще выглядит перепутанным до того, как связанный CSS успел загрузить, вам, вероятно, понадобится сделать что-то вроде этого, где вы просто спрячете bodyтег в <head>и затем покажете его с загруженным CSS

<style>
    body {display: none;}
</style>

<script type='text/javascript'>
    var d = document;
    var s = d.createElement('link');
    s.setAttribute('type', 'text/css');
    s.setAttribute('href', '/path-to-css.css');
    d.getElementsByTagName('head')[0].appendChild(s);
</script>

И в файле CSS это

body {display: block;}

Обратите внимание, что некоторые методы javascript могут не воспроизводиться при использовании display: none, и если это так, вы можете использовать, например,visibility: hidden/visible

обновленный

При желании вы можете отправить страницу только на скрипт, определить, какой CSS предоставить, а затем загружать HTML с помощью AJAX или просто перенаправить / перезагрузить и передать, какой CSS использовать с ним.

JavaScript, HTML, CSS, HTML,
Похожие вопросы
Яндекс.Метрика