JavaScript - Скрыть div при запуске (загрузка)

У меня есть div на моей странице php, который использует jQuery, чтобы скрыть его после загрузки страницы. Но есть ли способ скрыть его с самого начала загрузки?

Причина, о которой я прошу, заключается в том, что в течение короткой секунды вы можете видеть div при загрузке страницы, а затем скрывается, когда страница полностью загружена.

Он выглядит непрофессиональным.

Просто интересно, есть ли способ обойти это?

Спасибо

Ответы

Ответ 1

Используйте стиль css, чтобы скрыть div.

#selector { display: none; }

или используйте его, как показано ниже,

CSS

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

и в jQuery

 $(function () {
     $('#blah').removeClass('hidden');
 });

Ответ 2

У меня была такая же проблема.

Использовать CSS для скрытия - не лучшее решение, потому что иногда вы хотите, чтобы пользователи без JS могли видеть div. Самое чистое решение - скрыть div с помощью JQuery. Но div видно около 0,5 секунды, что проблематично, если div находится в верхней части страницы.

В этих случаях я использую промежуточное решение без JQuery. Это работает и немедленно:

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>

Конечно, вы можете добавить все эффекты, которые вы хотите использовать в div, JQuery toggle(), например. И вы получите лучшее поведение (imho):

  • для пользователей, не являющихся пользователями JS, div отображается напрямую
  • для пользователей JS, div скрыт и имеет эффект переключения.

Ответ 3

Запрет решения CSS. Самый быстрый способ - немедленно скрыть его с помощью script.

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

В этом случае я бы рекомендовал решение Vega от Vega. Но если вам нужно что-то более сложное (например, анимация), вы можете использовать этот подход.

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

Ответ 4

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

<html>
<head>  
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
</head>
<body>
    <div id="HiddenStuff1" style="display:none">
    CONTENT TO HIDE 1
    </div>
    <div id="HiddenStuff2" style="display:none">
    CONTENT TO HIDE 2
    </div>
    <div id="HiddenStuff3" style="display:none">
    CONTENT TO HIDE 3
    </div>
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>

Ответ 5

Почему бы не добавить "display: none;" к атрибуту стиля divs? Thats вся функция JQuery.hide() делает.

Ответ 6

С помощью CSS вы можете просто установить отображение: none для элемента в файле CSS или в атрибуте style

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

или с js сразу после того, как div может быть достаточно быстрым, но не так, как чистый