使用jQuery + AJAX + XML“加载更多”

Question

I'm making a website to show 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?

Answer 1

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