Измените html перед рендерингом, чтобы избежать мерцания

У меня есть код, который я хотел бы запустить до отображения страницы. Например, обновить даты от абсолютного времени до относительного времени или преобразовать исходный текст (или уценку) в html. Если я повторно загружаю страницу несколько раз, я вижу, что время от времени мерцает, обновляя изменения. Как запустить код, как он нарисован, в конце, где нужно перерисовать все?Измените html перед рендерингом, чтобы избежать мерцания

Я попытался document.addEventListener('beforeload' кажется, что событие не изношено и больше не поддерживается в хроме

источник

2016-09-27 Anonymous

Вам нужно подумать о жизненном цикле вашей страницы.

Когда ваша страница загружается, если встречается тег <script>, он будет немедленно выполнен и предотвратит визуализацию любого содержимого, пока этот скрипт не будет завершен. This isn't recommended practice.

Но, чтобы ответить на ваш вопрос, вы могли сделать что-то вроде этого:

<p>Your next reward will be available in <span id="nextRewardTime">3600</span>.</p> 
<script type="text/javascript"> 
    var $el = $('#nextRewardTime'); 
    $el.text(format($el.text()); 
</script> 

<p>Come back soon!</p>

Теперь, сразу же после того, как первый <p> загружается в браузере, он будет ударить <script> тег и выполнить JS. Только после завершения будет загружен следующий тег <p> («Вернитесь скоро!»).

Вы не можете прикреплять обработчик событий к Javascript, прежде чем он будет отображаться на DOM, потому что ... ну ... это не на DOM.

Лучше всего это сделать, чтобы правильно отформатировать на сервере в первую очередь.

Редактировать: Кроме того, разметка тегов скриптов на вашей странице делает ваш код действительно незабываемым!

источник

2016-09-27 14:12:27

Я надеялся, что смогу сделать это на клиенте, поскольку локальное время доступно в JS, а не в заголовках http. Я мог бы поместить его в файлы cookie, но это будет загрузка страницы за –

. Я не уверен, кто проигнорировал это (или другой ответ), но это был не я. –

@acidzombie К сожалению, если это нужно сделать на стороне клиента, всегда будет возникать риск задержки между загружаемым контентом и выполнением JS. Как долго эта задержка зависит от того, как вы переносите свой код в '$ (document) .ready (...)' или размещаете JS сразу после элемента. –

Я хотел бы использовать document.readyState и самоосуществляющийся функцию:

<body> 
<script> 
    function executeFunction() { 
     //do stuff - such as check for anchor tags 
     $("a").html('Replaced'); 
     if (document.readyState === 'loading') executeFunction(); // repeat to ensure all the tags get innerHTML-ed 
    } 
    (function(){ 
     if (document.readyState === 'loading') executeFunction(); 
    })(); 
</script> 
<!-- more HTML --> 
</body>

Это кажется, что вы хотите JS для выполнения в страница загружается. Вы также можете попробовать использовать uninitialized как состояние готовности (которое происходит до «загрузки»).

источник

2016-09-27 13:56:37

Это кажется правильным, но мне не хватает части. Допустим, мой код равен $ ('a'). Html ('Replaced') 'как мне его запустить, поскольку все теги' a' загружаются? Использую ли я что-то вроде '$ (document) .on ('load', 'a', mycode)'? Я только что сделал это, я не уверен, действительно ли это –

. Я отредактирую свой ответ с помощью «творческого» возможного подхода. –

ОК - надеюсь, мое обновление полезно –

Измените html перед рендерингом, чтобы избежать мерцания

ответ

Смежные вопросы