Estoy tratando de cargar el contenido de un archivo externo en el html maestro pieza por pieza. Logré cargar la primera parte, pero no sé cómo seleccionar la siguiente. Idealmente, la siguiente parte se carga en el desplazamiento (cuando uno toca la parte inferior de la página); la función de desplazamiento también funciona para mí, por lo que el único problema es cómo seleccionar el siguiente fragmento de html externo.

Mi plantilla maestra:

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

El archivo externo tiene todos los divs que quiero cargar:

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

Comencé cargando los primeros 10 elementos en mi plantilla maestra vacía (esto funciona) y luego intenté cargar los siguientes 10 elementos en bucle usando el selector gt (esta es mi última idea para este problema, pero no funciona):

 $(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+')'); }; }; }; }); });

No quiero cargar todo el archivo externo al principio, ya que es enorme y se supone que cargarlo gradualmente hará que la web funcione sin problemas.

También estaba pensando en usar la función slice(start,end) en external.html para seleccionar la siguiente parte de divs para cargar, pero no puedo hacer que funcione.