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

Question

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

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

Answer 1

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

Если вы не возражаете JQuery быть завален по всей странице, а не быть все в отдельном файле, вы можете вызвать $ («# divToHide»). Скрыть (); сразу после появления элемента. Однако не очень хорошая практика. Хотя это зависит от варианта использования, если вы в значительной степени являетесь разработчиком/пользователем, создающим сайт с 5 страницами брошюры, вы должны выбрать, что подходит именно вам!

Или, если вы немного больше техник, вам может понравиться обходить .live()/.livequery() и поймать вставку элемента с помощью JS и скрыть сразу. См. Этот пост Is there a jquery event that fires when a new node is inserted into the dom?

Answer 2

К сожалению, способ, которым работает Javascript, , кажется, невозможен. Будет всегда быть частью секунды между первым визуализированным фреймом и ко времени JavaScript, чтобы скрыть элемент, будет выполнен.I was wrong about that, jQuery seems to be able to do that. Таким образом, 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/