1

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>

5
  • Esse HTML não está muito bom pois tens um div no meio de li. Isso pode ser mudado?
    – Sergio
    Commented 25/11/2016 às 16:58
  • Pode sim, Sergio. Usei só como exemplo pra dizer que os 2 ultimos li's só serão carregados após o clique neste botão (div).
    – Will
    Commented 25/11/2016 às 17:01
  • 1
    Se a questão é desempenho você deveria usar CSS. Alterar a classe de alguns li's via JS deve ser mais rápido do que criar/remover dinamicamente um elemento no DOM.
    – Genos
    Commented 25/11/2016 às 17:02
  • A ul original tem 18 imagens (é um portfolio). Então pensei em carregar de 6 em 6 imagens. Para o site não ter que demorar muito para abrir.
    – Will
    Commented 25/11/2016 às 17:18
  • Pois adicionei um preloader onde ele só permite a visualização da pagina após ela ser totalmente carregada.
    – Will
    Commented 25/11/2016 às 17:22

1 Resposta 1

1

Uma forma é deixar display: none dos itens que serão escondidos e quando clicar no botão exibi-los.

$(".botao").click(function(){
  $("li[esconder]").show();
});
li[esconder] {
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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> 
  <li esconder>
    <a href="img/portfolio/3.jpg">
      <img src="img/portfolio/3-thumbs.jpg">
    </a>
  </li>
  <li esconder>
    <a href="img/portfolio/4.jpg">
      <img src="img/portfolio/4-thumbs.jpg">
    </a>
  </li>
</ul>
<div class="botao">Ver mais</div>

Outra opção é adicionar os itens após o click do botão:

$(".botao").click(function(){
  // quantidade que está presente
  var qtd = $("ul li").length;
  
  // incrementando de 6 em 6
  for (var i = 3; i <= qtd + 6 ; i++){
    var li =   '<li>'+
    '<a href="img/portfolio/'+i+'.jpg">'+
      '<img src="img/portfolio/'+i+'-thumbs.jpg">'+
    '</a>'+
  '</li>';
    $("ul").append(li);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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> 
</ul>
<div class="botao">Ver mais</div>

5
  • É uma linda alternativa, Lucas. Obrigado pela sua contribuição. Mas, desta forma, todos os li não serão carregados ao acessar a página? Estarão apenas ocultos.
    – Will
    Commented 25/11/2016 às 17:19
  • A ul original tem 18 imagens (é um portfolio). Então pensei em carregar de 6 em 6 imagens. Para o site não ter que demorar muito para abrir.
    – Will
    Commented 25/11/2016 às 17:19
  • Outra forma, nesse caso, é quando ao clicar no botão adicionar os itens, usando o append do jQuery.
    – BrTkCa
    Commented 25/11/2016 às 17:21
  • Excelente! Sabe como eu posso aplicar esta tecnica à este exemplo?
    – Will
    Commented 25/11/2016 às 17:23
  • Sim, editei a resposta com a segunda. Veja se seria isso :)
    – BrTkCa
    Commented 25/11/2016 às 17:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .