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

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

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

Я сначала хочу, чтобы DIV быть не видно, так что я использовал:

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

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

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

источник

2010-06-01 Robert

div.hidden 
{ 
    display: none 
} 

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

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

источник

2010-06-01 15:33:09

+1 Одна вещь, чтобы отметить, что если пользователь отключил JavaScript в браузере вся страница остается скрытой. –

Из моего опыта некоторые браузеры не будут загружать носители (например, изображения) в элементы, которые скрыты с помощью 'display: none' или' opacity: 0'. Вместо этого я рекомендую использовать «видимость: скрытый». – mqchen

@ mq.chen Благодарим за предупреждение, однако тег видимости не позволяет добавлять контент в команду .hide(). – Robert

В CSS:

#extraControls { display: none; }

Или в HTML:

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

источник

2010-06-01 15:32:39 Caleb

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

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

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

источник

2010-06-01 15:33:56 CharlesLeaf

сделать класс CSS

.hidden { 
display: none; 
}

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

источник

2010-06-01 15:37:49 OMGKurtNilsen

#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 ...

источник

2011-04-11 01:48:15 Ravi

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

Here is a demonstration of how to do this. Основная идея заключается в том, что CSS при загрузке добавит один узел в DOM при загрузке этого узла и его дочерних узлов. Кроме того, как только второй ребенок добавляется к данному родительскому узлу, правило выбора :only-child нарушено. Мы сопоставляем этот селектор и устанавливаем display: none, чтобы скрыть данный узел.

<!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>

источник

2013-12-25 12:58:32

Лучший способ загрузки яваскрипта функции по загрузке страницы, является

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

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

div.hidden 
{ 
    display: none 
} 

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

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

источник

2017-09-14 14:00:34 drafiko

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

ответ

Смежные вопросы