"Load More" with jQuery + AJAX + XML

I'm making a website to sho开发者_JS百科w a lot of documents (PDFs and JPGs) in one page, and I'm worried about page load times and server load because there are a lot of files. I'm storing the file data in an XML file, and am retrieving the data with jQuery and AJAX.

jQuery:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "scripts/imagenes.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('imagen').each(function() {
                var path = $(this).find('path').text();
                var img = $(this).find('img').text();
                var thumb = $(this).find('thumb').text();
                $('<a rel="lightbox" href="'+path+img+'">').html('<img src="' + path + thumb + '" /></a>').appendTo(".item_aesmr_img_hola");
            });
        }
    });
});

XML:

<?xml version="1.0" encoding="UTF-8"?>
<instituciones>
  <aesmr>
    <carnets>
      <imagen>
        <path>docs/aesmr/carnets/</path>
        <img>aesmr-carnet-016b.jpg</img>
        <thumb>thumbs/aesmr-carnet-016b.jpg</thumb>
      </imagen>
      <imagen>
        <path>docs/aesmr/carnets/</path>
        <img>aesmr-carnet-025b.jpg</img>
        <thumb>thumbs/aesmr-carnet-025b.jpg</thumb>
      </imagen>
      ...and so on...
    </carnets>
  </aesmr>
</instituciones>

I thought it would be a nice idea to use the typical Load more... button, just to let the user load the images as and when they want, with an increment of 20 images at a time. I load the thumbs with the full image is loaded when the thumbnail is clicked.

Is there a way to just load the first 20 results and then use the button to show 20 more?

one option would be to add counter in the "each" block. so that when you reach 20, you terminate the execution of the script.