BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Listado de registros con scroll infinito en PHP, Ajax y jQuery

21/NOV/2012 31.759 visitas Ver comentarios
Listado de registros con scroll infinito en PHP, Ajax y jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

ACTUALIZACIÓN SEPTIEMBRE 2013: A pedido de un usuario en los comentarios, hay una variante del scroll infinito en PHP y Ajax lanzado desde un botón y no al desplazar el scroll al final de la página. Si quieres ver la demo, vete a este enlace.

Ahora que ya conoces las redes sociales, porque las conoces, no? habrás visto que la mayoría utiliza el scroll infinito de datos, es decir, a medida que vas bajando el scroll en la pantalla, se van cargando automáticamente nuevos registros de tus bases de datos.

Pues bien, sé que estas técnica tiene seguidores y detractores por igual. Yo, simplemente, estoy en el medio, me parece bien aplicarla en algunas ocasiones (te evitas un paginado por ejemplo en una lista de noticias) pero este contenido no es nada amigable a los motores de búsqueda, porque, básicamente, no existe, entonces no es indexable (cosa que sí lograrías con una paginación).

En sistemas cerrados como Facebook o Twitter, donde la indexación en buscadores básicamente no interesa, les da igual un método que otro y prefieren ese método por la fluidez de la carga del nuevo contenido, pero en tu caso, si tu web está orientada al posicionamiento, no es nada recomendable el uso de ajax para la carga de datos ya que el robot del dios Google no podrá acceder a él al no existir.

Pues bien, lo que te dejo a continuación es un método sencillo para cargar registros de 10 en 10 cada vez que el scroll de tu página se acerque al noventa y pico porciento de tu pantalla.

Para cargar noticias, PHP puro y duro, para traer 10 registros nuevos cada vez que hago scroll, AJAX y PHP y para controlar el scroll, me baso en jQuery scrollExtend plugin que no es de los que más me gustan pero cumple su objetivo.

Te dejo una demo totalmente funcional que irá cargando los artículos de este blog de 10 en 10 y abajo los códigos necesarios para hacerlo funcionar.

El código consiste en la página que mostrará los resultados, un plugin jQuery para la llamada AJAX y mostrar el icono de cargando y un fichero php que se ocupará de buscar los nuevos registros a mostrar.

Para saber donde empezamos cada vez, luego de intentarlo, el plugin no permite el paso de variables en la url, así que opté por una variable de sesión PHP que se reinicia si presionamos F5 o refrescamos la página.

Código 1 - XHTML
<?php
session_start();
require_once("config.inc.php"); /* ARCHIVO DE CONEXIÃ?N A LA BBDD */
unset($_SESSION["cantidadcargadas"]); /* SI ACTUALIZAMOS DEBEMOS PONER LA CUENTA A 0 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Scroll infinito de noticias con jQuery y PHP</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#infinite_scroll').scrollExtend(
{
'target': '#lista_noticias',
'url': 'scroll.php'
});
});
</script>
<style>
*{padding:0;margin:0}
html{text-align:center;}
body{width:950px;margin:0 auto;font-family:trebuchet ms;text-align:left;margin-top:10px;padding:0 0 150px 0}
li{list-style:none;margin:20px 0;border:5px solid #ddd;padding:20px;font-size:12px}
div.scrollExtend-loading {height: 32px;background-image:url('loading.gif');background-position: center center;background-repeat: no-repeat;}
</style>
</head>
<body>
<h1>Demo - Scroll Infinto con Jquery </h1>
<div id="infinite_scroll">
<ul id="lista_noticias">
<?php
$q1="select titulo,texto from blog where activo='Si' order by fecha desc limit 0,10";
mysql_select_db($dbname);
$r1=mysql_query($q1);
while ($f1=mysql_fetch_array($r1))
{
?>
<li><strong><?php echo $f1["titulo"]; ?></strong><br /><?php echo strip_tags($f1["texto"]); ?></li>
<?php
}
?>
</ul>
</div>
</body>
</html>
Código 2 - PHP
<?php
/* ARCHIVO SCROLL.PHP */
session_start();
require_once("config.inc.php");
if (!isset($_SESSION["cantidadcargadas"])) $_SESSION["cantidadcargadas"]=10;
$q1="select titulo,texto from blog where activo='Si' order by fecha desc limit ".$_SESSION["cantidadcargadas"].",10";
mysql_select_db($dbname);
$r1=mysql_query($q1);
while ($f1=mysql_fetch_array($r1))
{
?>
<li><strong><?php echo utf8_encode($f1["titulo"]); ?></strong><br /><?php echo strip_tags($f1["texto"]); ?></li>
<?php
}
$_SESSION["cantidadcargadas"]+=10;
?>
Código 3 - JAVASCRIPT
/*
 * jQuery scrollExtend plugin v1.0.1
 * 
 * Copyright (c) 2009 Jim Keller
 * Context - http://www.contextllc.com
 * 
 * Dual licensed under the MIT and GPL licenses.
 *
 */

//
// onScrollBeyond
//	
jQuery.fn.onScrollBeyond = function(callback, options) {
	
	var domTargetElement = this;

	//
	// Special actions
	//
	if ( callback == 'disable' ) {
		jQuery(domTargetElement).data('onScrollBeyond-disabled', true);
		return;
	}
	
	if ( callback == 'enable' ) {
		jQuery(domTargetElement).data('onScrollBeyond-disabled', false);
		return;
	}

	//
	// Main Body
	//
       	var settings = {
       		'buffer': 20,
       		'fireOnDocEnd': true,
       		'fireOnBeyondElement' : true
       	};
	

	jQuery.extend(settings, options);

	jQuery(window).bind('scroll', 
		function() {

			var fire = false;
			var jqTargetElement = jQuery(domTargetElement);

			if ( jqTargetElement.data('onScrollBeyond-disabled') == true ) {
				return; 
			}
			
			if ( settings.fireOnBeyondElement ) {
				
				// if element has scrolled off the screen, even if other elements exist below it
				if ( jQuery(document).scrollTop() > (jqTargetElement.position().top + jqTargetElement.height()) ) {
					fire = true;
				}
			
			}
			
			if ( !fire && settings.fireOnDocEnd ) {
			
				var amt_scrolled = jQuery(document).scrollTop() - jqTargetElement.position().top ;
				
				// if the amount of the element we already scrolled beyond + its top position on the document + the window height + some buffer is greater than the total doc height
				if ( (amt_scrolled + jqTargetElement.position().top + jQuery(window).height() + settings.buffer) > jQuery(document).height() ) {
					fire = true;
				}
			}
			
			if ( fire ) {
				callback.call(this, domTargetElement);
			}
			
			
		}		
	);       	

return this;

};


//
// scrollExtend
//
jQuery.fn.scrollExtend = function(options) {
	
	//
	// Special actions
	//
	if ( options == 'disable' ) {
		jQuery(this).data('scrollExtend-disabled', true);
		return;
	}
	
	if ( options == 'enable' ) {
		jQuery(this).data('scrollExtend-disabled', false);
		return;
	}
	
	
       	var settings = {
       		'url': null,
       		'beforeStart': null,
       		'onSuccess': null,
       		'target': null, 
		'loadingIndicatorEnabled': true,
       		'loadingIndicatorClass': 'scrollExtend-loading',
		'newElementClass': '',
		'ajaxSettings': {}
       	};

	var url;
	var localAjaxSettings = {};
	var ajaxSettings = settings.ajaxSettings;
	
       	jQuery.extend(settings, options);
	jQuery.extend(ajaxSettings, settings.ajaxSettings);		

	jQuery(this).onScrollBeyond(
		function(container) {
		
			var jqContainerElem = jQuery(container);

			//
			// Make sure scrollExtend wasn't explicitly disabled,
			// and that we're not already loading a new element
			//
			if ( jqContainerElem.data('scrollExtend-disabled') != true && 
					jqContainerElem.data('scrollExtendLoading') != true ) {
			
				jqContainerElem.data('scrollExtendLoading', true);
			
				if ( typeof(settings.beforeStart) == 'function' ) {
					var ret = settings.beforeStart.call(this, container);
					if ( !ret ) {
						jqContainerElem.data('scrollExtendLoading', false);
						return;
					}
				}
			
				//
				// Check the disabled flag again in case
				// it was changed during the beforeStart callback
				//
				if ( jqContainerElem.data('scrollExtend-disabled') == true ) {
					jqContainerElem.data('scrollExtendLoading', false);
					return;
				}
			

				//
				// Set the URL
				//				
				if ( typeof(settings.url) == 'function' ) {
					url = settings.url.call(this, container);
				}
				else {
					url = settings.url;
				}
			
				ajaxSettings.url = url;

				//
				// Set up our new element
				//
				var target = ( settings.target ) ? settings.target : container;
				var new_elem = ( container.is('table') ) ? jQuery('') : jQuery('
'); if ( settings.newElementClass != '' ) { jQuery(new_elem).addClass( settings.newElementClass ); } // // Add loading indicator // if ( settings.loadingIndicatorEnabled ) { var jqLoadingElem = jQuery('
'); jqLoadingElem.addClass( settings.loadingIndicatorClass ); jqLoadingElem.appendTo(target); } // // Set up the AJAX request // localAjaxSettings = { 'success': function(data, textStatus) { var target = ( settings.target ) ? settings.target : container; jQuery(new_elem).html(data); jQuery(new_elem).appendTo(target); if ( typeof(settings.onSuccess) == 'function' ) { settings.onSuccess.call( this, container, new_elem ); } jQuery(container).data('scrollExtendLoading', false); if ( settings.loadingIndicatorEnabled ) { jqLoadingElem.remove(); } } } jQuery.extend(ajaxSettings, localAjaxSettings); // // Run the AJAX request // jQuery.ajax( ajaxSettings ); } }, settings ); return this; };

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018