I'm trying to load contents of an external file into master html piece by piece. I managed to load the first part, but I don't know how to select the next one. Ideally, the next part is loaded on scroll (when one hits the bottom of the page) - scroll function works for me too, so the only problem is how to select the next fragment of external html.

My master template:

<div id='master'> 
  // This is where to load external divs
</div>

External file has all the divs I want to load:

<div cls='new'> </div>
<div cls='new'> </div>
<div cls='new'> </div>
...

I started with loading the first 10 elements into my empty master template (this works) and then try to load the next 10 elements in loop using gt selector (this is my last idea for this problem, but not working):

$(document).ready(function () {
  x = 10;
  $('#master').load('external.html .new:lt('+x+')',function() {

    var size_master = $("#master .new").length;
    master = document.getElementById('master');

    y = size_master + 1; // current number of divs on master template +1
    z = y+10; // append y by the next 10 divs from external.html

    master.onscroll = function() {
      if(master.scrollTop + master.clientHeight == master.scrollHeight) {
      for (var i = y; i < z; i++) {  
        $('#master').last().load('external.html .new:gt('+i+')');
      };
      };
    };
  });
});

I don't want to load the whole external file at the beginning as it is huge and loading it gradually is supposed to make the web work smoothly.

I was also thinking of using slice(start,end) function on external.html to select the next part of divs to load but I can't make it work.