Я старался изо всех сил быть пуристом с использованием техник Javascript / Ajax, гарантируя, что все поведение Ajax-y является расширением базовой функциональности, в то время как сайт также полностью функционирует, когда Javascript отключен. Однако это вызывает некоторые проблемы.
В некоторых случаях узел DOM должен быть виден только в том случае, если в браузере включен Javascript. В других случаях он должен быть виден только при отключении. Возьмем, например, кнопку отправки в форме, которая имеет выпадающий список с обработчиком onchange, который автоматически отправляет (используя плагин формы JQuery):
<form method="post" action=".">
<label for="id_state">State:</label>
<select name="state" id="id_state" onchange="$(this.form).ajaxSubmit(ajax_submit_handler);">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<input class="with_js_disabled" type="submit" value="OK" />
</form>
и Javascript:
<script type="text/javascript">
$(document).ready(function()
{
$(".with_js_disabled").hide();
});
</script>
Когда Javascript включен, кнопка отправки не требуется (из-за обработчика onchange). Однако функция JQuery $ (document) .ready (и более прямой document.onload) вызывается только после полной загрузки и рендеринга страницы - следовательно, кнопка отправки первоначально отображается, и «flash» происходит, когда Javascript выполняется, и отображение узла установлено в «none».
Я принял это как стоимость ведения бизнеса, и не нашел способа обойти это. Но есть ли техника, о которой я не знаю, которая минимизирует эффект или даже полностью устранит его?
EDIT:
Решение <noscript>, упомянутое многими ниже, кажется многообещающим, но у меня не работает в Safari. Однако второе предложение Престола прекрасно работает:
<body>
<script type="text/javascript">
document.body.className += ' has_js';
</script>
<!-- the rest of your page -->
</body>
Затем его можно стилизовать с помощью простого CSS:
body .js_enabled_only { display: none; }
body .js_disabled_only { display: block; }
body.has_js .js_enabled_only { display: block; }
body.has_js .js_disabled_only { display: none; }
Эта вторая строка только для справки и может (и должна) быть удалена, чтобы избежать обстоятельств, при которых ваш элемент не должен отображаться: блок. Точно так же вам могут потребоваться другие варианты третьей строки для других стилей отображения. Но это решение красивое и чистое, IMO, и в моих тестах полностью исключает эффект мерцания.