Upload image only when you click a button to display

Question

Guys I made a photo gallery a little big so I added an effect of slice in it are 64 images in case when the site loads only appears 12 and when the user clicks on see more will appear 12 in 12 it works normally follows the script of the effect:

$(".images-spaces").slice(0, 12).show();
        $("#loadMore-photos").on('click', function (e) {
            e.preventDefault();
            $(".images-spaces:hidden").slice(0, 12).slideDown();
            if ($(".images-spaces:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
        });

the problem is that all 64 images upload together with the site and to optimize this wanted it to load only the first 12 which are the ones I left showing initially and wanted the following images not to be loaded when accessing the site but only when I click on button to see more photos:

<li class="col-md-2 no-padding all deck images-spaces" data-src="assets/images/gallery/deck-05.jpg">
                           <a href="assets/images/gallery/deck-05.jpg">
                               <img class="img-responsive" src="assets/images/gallery/deck-05.jpg" alt="Deck" />
                               <div class="gallery-ecoresort-poster">
                                    <p>Deck</p>
                                </div>
                           </a>
                       </li>

    <a href="#" id="loadMore-photos">Ver mais fotos</a>

I would like to know if it is possible to do this with this current gallery that I have.

Answer 1

You can add the src image or variable as an attribute of an element and by clicking it create the element <img> through javascript, follows an example:

function CarregaImagens(divDestino, data){
  var imagens = data.attr('imagens').split(",");
  var html = "";
  for(i=0;i<imagens.length;i++){
    html = html + "<img src='" + imagens[0] + "' width='5%'/>";
  }

  divDestino.html(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button type="button" name="Btn" id="Btn" imagens="https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1, https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1"
 onclick="CarregaImagens($('#imagens1'), $(this))">
    Exibe 12 Primeiras
  </button>
  <button type="button" name="Btn" id="Btn" imagens="https://i.stack.imgur.com/1dy2j.jpg?s=328&g=1, https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1" onclick="CarregaImagens($('#imagens2'), $(this))">
    Exibe Próximas 12
  </button>
</div>
<div id="imagens1">

</div>

<div id="imagens2">

</div>