Прогрессивное улучшение - не скрывать элементы с помощью CSS

Question

Я часто обнаруживаю / скрываю элементы с помощью jQuery, например, простую область содержимого с вкладками, где первая вкладка видима, а другие нет, пока они не отображаются с помощью javascript. Я знаю, что не стоит прятать изначально скрытые с помощью CSS (отображать: нет), а затем показывать правильные с помощью JS, поскольку пользователи, не являющиеся JS, никогда ничего не увидят. Поэтому по умолчанию я показываю все, а затем скрываю соответствующие с помощью JS.

При этом скрытые элементы загружаются, а затем скрываются только тогда, когда документ готов. Как я могу остановить это? Есть ли способ сделать это таким образом, чтобы он изящно деградировал, но при этом не имел элементов, появляющихся во время загрузки, а затем быстро исчезающих, так как это выглядит немного скучно.

Answer 1

Несколько мыслей...

Если вы не возражаете против того, чтобы jQuery был засорен по всей странице, а не в отдельном файле, вы можете вызвать $('#divToHide'). Hide(); сразу после появления элемента Не очень хорошая практика, хотя. Хотя это зависит от варианта использования, если вы в основном дизайнер / разработчик, создающий 5-страничный сайт-брошюру, вы должны выбрать то, что подходит именно вам!

Или, если вы немного более технарь, вы можете возиться с .live()/.livequery() и поймать вставку элемента с помощью JS и скрыть сразу. См. Этот пост. Есть ли событие jquery, которое срабатывает, когда в dom вставляется новый узел?

Answer 2

К сожалению, то, как работает Javascript, это не представляется возможным. Всегда будет доля секунды между первым визуализированным кадром и к тому времени, когда исполняется JavaScript, чтобы скрыть элемент Я был неправ по этому поводу, jQuery, кажется, в состоянии сделать это. Итак, CSS - лучшее средство для этого. К счастью, вы можете добавить альтернативную таблицу стилей CSS в печально известной <noscript> тег:

<style type="text/css">
    #jquery-thing {
        display: none;
    }
</style>
<noscript>
    <style type="text/css">
        #jquery-thing {
            display: block !important;
        }
    </style>
</noscript>

Вот ссылка на JSFiddle: http://jsfiddle.net/kylewlacy/dbWuc/