HTML / javascript: предотвращение рисования до выполнения кода
У меня есть страница с файлом javascript в конце. файл помещается в конец, так что я получаю доступ ко всем элементам dom. допустим, разметка выглядит так
<html>
<head></head>
<body>
//lot of markup here
<script src = "my-js.js"></script>
<body>
образец разметки просто показывает расположение моего файла js.
первый, как в js-файле (my-js.js), это
document.body.style.visibility = 'hidden';
После запуска кода я снова установил видимость как скрытую.
Из того, что я понял (из множества статей, связанных с этим, включая статьи с stackoverflow), браузер достигает js, затем выполняет его, а затем продолжает рендеринг, а затем рисует. Если это правда, мой описанный код должен работать нормально.
Однако сейчас происходит то, что страница отображается (менее 500 мс) в том виде, в котором она была до выполнения кода, затем быстро скрывается, а затем снова отображается после выполнения кода.
Короче говоря, я хочу: страница скрыта> код выполняется> страница отображается вместо этого я получаю страница отображается> страница скрыта> выполняется код> отображается страница
У меня вопрос: почему страница отображается в течение этой доли секунды? что я здесь делаю не так?
PS: Обратите внимание, что я не могу ни изменить расположение js, ни добавить еще один. Так что не публикуйте решения, которые предлагают то же самое. Что еще более важно, я хочу знать, почему мой код неправильный.
Можно ли встроить стиль в элементы верхнего уровня, чтобы скрыть их?
нет, я не могу ничего добавить на страницу. это похоже на плагин, который клиент добавит (тег скрипта) на страницу. У меня нет контроля над исходной страницей, на которой он используется.
Я бы переместил любой плагин, который портит видимость содержимого моей страницы, в / dev / null в мгновение ока ... Это просто очень плохой UX; Я думаю, что пользователи предпочитают видеть хоть какой-то контент, а не ждать перед пустым экраном.
@CBroe Каковы бы ни были лучшие практики UX, в конце концов, все зависит от того, чего хочет клиент.
@maX - Вы пробовали использовать defer? При правильном использовании это решит вашу проблему. Пожалуйста, смотрите мой ответ ниже.
Браузеры отображают части страницы, как только им удобно, у них есть для этого достаточно информации, и это хорошо. Десять лет назад люди спрашивали противоположное тому, что вы хотите, когда дело дошло до долгого времени рендеринга их огромных таблиц ...
@snack_overflow да, я сделал. после того, как вы отправили ответ. все тот же. Тег скрипта выглядит так: <script src = 'my-js.js' defer> </script>
Для этого нужен CSS, поэтому добавьте body { visibility: hidden; } в свою таблицу стилей, а затем отмените это с помощью своего скрипта.
Возможно, в их конкретной ситуации имело бы смысл показывать «ничего», пока все не будет готово - но для облегчения этого вам придется работать с ними немного ближе, чем на основе «вставки плагинов», что может потребовать изменений. о том, как их сайт построен на более низких уровнях.
Лучше всего, вероятно, будет иметь встроенный скрипт, который ничего не сделает, кроме как установить видимость тела на скрытую на самом верху, чтобы позже ее отменил ваш «основной» скрипт - если они могут встроить ваш скрипт плагина в самый низ и захотят этот эффект тоже должен быть возможен.
Разве знать почему важнее, чем то, как исправить? ... Если я правильно понял, вы вообще не можете изменить код? ... если да, то как вы можете решить, что скрипт загружается в конце тела, и если вы можете решить, почему вы не можете внести изменения в начало страницы? ....
... вы можете сказать, что вы делаете может вместо того, чтобы говорить, что вы не могу
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Возможно, вас заинтересует метод defer.
defer means “wait for the parser to finish to execute this”. It’s roughly equivalent to binding your script to the DOMContentLoaded event, or using jQuery.ready. When the code does run, everything in the DOM will be available for you to use. Unlike async, defer’d code will run in the order it appears in the HTML of the page, it is just deferred until after the HTML is fully parsed.
Например:
<script src = "my-js.js" defer></script>
Посмотреть еще здесь
Хотя теоретически это может дать ответ на вопрос, было бы предпочтительнее включает сюда основные части ответа и предоставляет ссылку для справки.
Хорошо! Будем надеяться, что тот, кто проголосовал против, отозвал свой голос против.
@maX - Странно. Попробуйте добавить defer перед src и очистите кеш. Это сработало для меня раньше. defer и async действительно полезны.
Классное предложение! +1
Во-первых, defer некорректно работает в разных браузерах, во-вторых, в вашей цитате написано "отложено до после, HTML будет полностью проанализирован". Ключевое слово здесь - после, это именно то, что OP хочет нет, поэтому страница мигает, прежде чем она будет скрыта.
@NickyTheWrench Как это круто? ... прочтите мой предыдущий комментарий, и вы увидите, что все наоборот.
@LGSon Я совершенно забыл про defer в теге скрипта, так что это было для меня хорошим напоминанием. В любом случае, я знаю, что говорят документы, но я только что проверил это, и страница не мигает.
Поместите тег script прямо в начало body, чтобы он оценивался почти так же, как визуализируется body.
<html>
<head></head>
<body>
<script>
document.body.style.visibility = 'hidden';
</script>
<p>Sample text</p>
</body>
</html>Вы также можете добавить тег style, чтобы скрыть видимость тела.
body{
visibility: hidden;
} <html>
<head></head>
<body>
<p>Sample text</p>
</body>
</html>@maX В таком случае, я не думаю, что вы многое можете сделать.
body всегда будет выполнять рендеринг до оценки script.
@maX А можно добавить stylesheet?
Браузер отображает теги немедленно, прежде чем они попадут на ваш
<script>.