Uploading images only after clicking button

Question

Uploading images only after clicking button

Navigation

#1 by (1 votes)

1

Hello, everyone!

I would like to know how I can cause multiple li's to be loaded only when the user clicks the "see more" button.

In the following example, I'd like you to see the first 2 lines when you access the page. To load the last 2 li's, you would need to click the "see more" button.

I'm referring to loading / optimizing page break time performance. That is, I do not just want to hide content with 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>

javascript jquery

asked by anonymous 25.11.2016 / 17:55

1 answer

Sort HTML tables Convert Header C / C ++ to Delphi

score 1 · Accepted Answer

One way is to leave display: none of the items that will be hidden and when you click the button to display them.

$(".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><ahref="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>

Another option is to add the items after the button click:

$(".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><ahref="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>