Как скрыть элемент HTML до загрузки страницы

У меня есть код JQuery, который показывает или скрывает div.

$("div#extraControls").show();   // OR .hide()

Сначала я хочу, чтобы div не был видимым, поэтому я использовал:

$(document).ready(function() {
    $("div#extraControls").hide();
});

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

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

Ответ 1

div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(document).ready(function() {
    $("div#extraControls").removeClass("hidden");
});

Ответ 2

Сделать класс css

.hidden {
display: none;
}

Добавьте это к любому элементу, который вы не хотите видеть при загрузке страницы. Затем используйте $("div#extraControls").show();, чтобы отобразить его снова.

Ответ 3

В CSS:

#extraControls { display: none; }

Или в HTML:

<div id="extraControls" style="display: none;"></div>

Ответ 4

#toggleMe //Keep this in your .css file
{
display:none;
visibility:inherit;
background-color:#d2d8c9;    
}


 <a href="#" onclick="return false;">Expand Me</a>
 ///this way u can make a link to act like a button too

 <div id="toggleMe">  //this will be hidden during the page load
  //your elements
 </div>

///if you decide to make it display on a click, follow below:
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project
<script type="text/javascript">
 $(document).ready(function () {
        $("a").click(function () {
            $('#toggleMe').toggle("slow"); //Animation effect
        });
    });
</script>

///Now for every alternate click, it shows and hides, but during page load; its hidden.
//Hope this helps you guys ...

Ответ 5

С помощью CSS3 вы можете скрыть контент до загрузки страницы, воспользовавшись селектором :only-child.

Вот демонстрация того, как это сделать. Основная идея заключается в том, что CSS при загрузке добавит один единственный node в DOM при загрузке этого node и его дочерних узлов. Кроме того, как только второй ребенок добавляется к данному родительскому node, правило селектора :only-child нарушается. Мы сопоставляем этот селектор и устанавливаем display: none, чтобы скрыть данный node.

<!doctype html>

<html>

  <head>
    <title>Hide content until loaded with CSS</title>
    <style type="text/css" media="screen">
      .hide-single-child > :only-child {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class='hide-single-child'>
      <div>
        <h1>Content Hidden</h1>
        <script>
          alert('Note that content is hidden until you click "Ok".');
        </script>
      </div>
      <div></div>
    </div>
  </body>

</html>

Ответ 6

Что вы можете сделать, это вставить встроенный тег script в конце документа или сразу после div с id "extraControls". Должен быть огонь немного раньше, чем.

<div id="extraControls">i want to be invisible!</div>
<script type="text/javascript">$("div#extraControls").hide()</script>

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

Ответ 7

Загружен лучший способ загрузки javascript-функции по странице,

$(window).bind("load", function() {
   // code here
});

В вашем случае

div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(window).bind("load", function() {
   $("div#extraControls").removeClass("hidden");
});