Algumas questões sobre o que ocorre quando utilizamos a propriedade display:none
do css:
O elemento é carregado e não é apresentado? Ou não chega a ser carregado (e por consequência não consome dados)?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEle é carregado. Caso você veja no Inspector de elemento
você verá que ele está lá, só está escondido com o display:none
. Um bom exemplo para você ver que ele é carregado e consome dados, é você fazer um loop de linhas com por exemplo, 50 mil registros; você verá que irá demorar um tempo para realizar o processo, mas ao findar, ele não aparecerá nada, pois está com o display:none
.
In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
O MDN diz que o documento é renderizado como se o elemento não existisse na árvore DOM. Isto significa que o navegador não irá processar suas informações de visibilidade, mas ele permanecerá na árvore DOM, permitindo o acesso através de javascript, por exemplo. Para efeitos de apresentação, o elemento não existe.
used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.
Devemos levar em consideração também que o display
é uma propriedade CSS e portanto deve descrever a apresentação dos elementos na tela.
The visibility property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table.
Por fim, diferente do display: none;
a propriedade visibility: hidden;
renderiza o elemento na tela mas oculta sua aparência. O elemento continua ocupando seu espaço de acordo com suas definições css. Segue abaixo exemplo de código sobre o comportamento de ambos os atributos.
.box{
background-color: red;
width:50px;
height:50px;
display:inline-block;
}
.hidden{
visibility: hidden;
background-color: red;
width:50px;
height:50px;
display:inline-block;
}
.none{
display: none;
background-color: red;
width:50px;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="hidden"></div>
<div class="box"></div>
<div class="none"></div>
<div class="box"></div>
Depende. O HTML certamente é carregado. Mas se o elemento contiver imagens, iframes ou outras coisas carregadas separadamente, o navegador terá a chance de não carregá-las enquanto o display estiver setado para none.
Como um exemplo concreto, numa aplicação que fiz e testei no Chrome do desktop constatei que um iframe dentro de um div com display:none não era carregado até o momento de exibir o div. Era fácil ver isso pela velocidade de carregamento, pelas ferramentas de desenvolvimento do navegador ou também pelos logs do servidor.
Eu não posso garantir que navegadores de dispositivos móveis têm esse mesmo comportamento, por isso seria bom testar a sua página com cuidado em diversas situações, até porque a resposta pode mudar à medida que novas versões de navegadores são lançadas e aperfeiçoadas.
Posso estar errado mas tenho quase certeza que não é carregado. Elementos com display:nome ficam de fora na hora do Render Tree, diferentemente do visibility: hidden que não só carrega o elemento quanto ocupa "espaço" no DOM.