How to upload images only after clicking button

Asked

Viewed 685 times

1

Hello, everybody!

I would like to know how I can make several li’s be loaded only when the user clicks the "see more".

In the following example, I would like that, when accessing the page, only the first 2 li’s are visualized. To load the last 2 li’s, you would need to click on the "see more".

I refer to loading/optimizing the performance of the page opening time. I mean, I don’t 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

  • This HTML is not very good because you have a div in the middle of li. That can be changed?

  • Yes, Sergio. I used only as an example to say that the 2 last li’s will only be loaded after clicking this button (div).

  • 1

    If performance is the issue, you should use CSS. Changing the class of some li’s via JS should be faster than dynamically creating/removing an element in the DOM.

  • ul original has 18 images (is a portfolio). So I thought about loading 6 out of 6 images. So the site doesn’t have to take long to open.

  • Because I added a preloader where it only allows the page to be viewed after it has been fully loaded.

1 answer

1


One way is to leave display: none of the items that will be hidden and when you click on the button 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>
    <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>

Another option is to add items after clicking the button:

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

  • It’s a beautiful alternative, Lucas. Thank you for your contribution. But, this way, won’t all read be loaded when accessing the page? Will only be hidden.

  • ul original has 18 images (is a portfolio). So I thought about loading 6 out of 6 images. So the site doesn’t have to take long to open.

  • Another way, in this case, is when you click on the add button, using the jQuery append.

  • Excellent! You know how I can apply this technique to this example?

  • Yes, I edited the answer with the second. See if that would be it :)

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.