En términos generales, necesitará tener algún tipo de estructura como esta

 ....first page of content... ....first page of content... ....first page of content... ....first page of content... ....first page of content... ....first page of content... ....first page of content... <div id="placeHolder"></div>

Luego, deberá detectar cuándo se está acercando al final de la página y obtener más datos.

 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ AddMoreContent(); } }); function AddMoreContent(){ $.post('getMoreContent.php', function(data) { //Assuming the returned data is pure HTML $(data).insertBefore($('#placeHolder')); }); }

Es posible que deba mantener una variable de javascript llamada algo como lastId que almacena la última identificación mostrada y pasarla al receptor AJAX para que sepa qué contenido nuevo devolver. Entonces en tu AJAX podrías llamar

 $.post('getMoreContent.php', 'lastId=' + lastId, function(data) { //Assuming the returned data is pure HTML $(data).insertBefore($('#placeHolder')); });

Hice exactamente esto en la página de búsqueda de mi empresa .

Solo para ampliar sobre Dutchie432. En mi experiencia la

if ($(window).scrollTop() == $(document).height() - $(window).height())

puede no ser cierto de manera consistente (personalmente, no pude hacerlo realidad porque estaba saltando números).
Además, si el usuario se desplaza hacia arriba y hacia abajo, podría disparar muchas solicitudes, mientras esperamos que regrese la primera llamada ajax.

Entonces, lo que hice para que funcionara fue usar >= en lugar de == . Luego, desvinculé el scrollTop antes de hacer mi solicitud ajax. Luego, vincúlelo nuevamente si el ajax ha devuelto algún dato (lo que significa que puede haber más).

Aquí está

 <script type="text/javascript"> $(document).ready(function(){ $(window).bind('scroll',fetchMore); }); fetchMore = function (){ if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){ $(window).unbind('scroll',fetchMore); $.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 }, function(data) { if(data.length>10){ $(data).insertBefore($('#moreHolder')); $(window).bind('scroll',fetchMore); } }); } } </script>

`

Te refieres a la carga progresiva dinámica.

Es un concepto bastante bien documentado e incluso hay soporte integrado para él de diferentes bibliotecas. JQuery en realidad tiene un GridView que admite la carga progresiva con bastante facilidad, por ejemplo.

Deberá utilizar AJAX para implementar esta función.