Olá, pessoal!
Gostaria de saber como posso fazer com que vários li's possam ser carregados apenas quando o usuário clicar no botão "ver mais".
No exemplo a seguir, gostaria que, ao acessar a pagina, apenas os 2 primeiros li's sejam visualizados. Para carregar os 2 últimos li's, seria necessário clicar no botão "ver mais".
Me refiro à carregamento/otimização do desempenho do tempo de abertura da página. Ou seja, não quero apenas esconder o conteúdo com CSS.
<ul>
<li>
<a href="img/portfolio/1.jpg">
<img src="img/portfolio/1-thumbs.jpg">
</a>
</li>
<li>
<a href="img/portfolio/2.jpg">
<img src="img/portfolio/2-thumbs.jpg">
</a>
</li>
<div class="botao">Ver mais</div>
<li>
<a href="img/portfolio/3.jpg">
<img src="img/portfolio/3-thumbs.jpg">
</a>
</li>
<li>
<a href="img/portfolio/4.jpg">
<img src="img/portfolio/4-thumbs.jpg">
</a>
</li>
</ul>
div
no meio deli
. Isso pode ser mudado?