Прогрессивное улучшение и «вспышка незакрытого контента»?

Question

Прогрессивное улучшение и «вспышка незакрытого контента»?

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

Мой вопрос заключается в том, как это сделать, не создавая отвлекающую «видимую, мгновенно скрытую» вспышку содержимого для пользователей JS.

Например, в версии JS я хочу свернуть часть моей формы поиска и вместо этого нажать кнопку «click here for extra options». Я делаю это следующим образом:

$(document).ready(function() { 
  $("#extra-options").hide();
  ...
  $("#show-extra-options").click(function() { 
     $("#extra-options").slideToggle();
  });
});

Это работает, но это означает, что для пользователей JS, когда страница загружается, дополнительные параметры видны на 500 мс или около того, тогда они исчезают. Это довольно отвлекает.

Есть ли разумный способ обойти это?

StackOverflow только что предложил этот ответ : это разумно? Извините, если это сейчас дублирующий вопрос, но я полагаю, что все равно стоит написать этот вопрос на моем родном языке, поскольку я не нашел ответа во время поиска.

1

добавлено 07 Февраль 2013 в 09:14 автор Richard отредактировано 23 Май 2017 в 10:24

Просмотры: 3

источник

nl ja de

1 ответы

автор Guffa · Answer 1 · 2013-02-07T09:25Z

Добавьте это в свой тег скрипта в голову:

$('html').addClass('js');

Затем вы можете использовать это для отображения и скрытия элементов:

.hasJs { display: none; }
.js .hasJs { display: block; }
.js .noJs { display: none; }

Вы можете скрыть контент для пользователей с или без Javascript:

<div class="hasJs">Some content only visible for JS users.</div>
<div class="noJs">Some content only visible for non-JS users.</div>

Поскольку класс и CSS находятся в голове, элементы уже будут стилизованы, когда они появятся, когда тело будет проанализировано.

Demo: http://jsfiddle.net/Guffa/YuAyr/

Это аналогичный подход к первому ответу на вопрос, с которым вы связались, но это несколько более чистое, потому что вам не нужно добавлять класс в элемент html в разметке, и код просто добавляет класс вместо его удаления.