Cargar más funciones en Javascript

Question

EDITAR: Esta pregunta fue en un principio demasiado general, creo. Entonces, lo que realmente necesito es un muy buen tutorial sobre cómo implementar la función Cargar más en Safari para iPhone al igual que el sitio web de Twitter (mobile.twitter.com). Solo un plugin de WordPress realmente no ayudará. Pero si el complemento está bien explicado, como si fuera wptouch, el hogar (que también tiene esta función) también puede hacerlo.

Sé que realmente no importa que se muestre en un dispositivo móvil, pero el punto que enfatizo es que si tal función está bien explicada, entonces me corresponde a mí saber cómo para personalizarlo a mi gusto

Estoy usando una función javascript para cargar entradas que vienen de la base de datos dinámicamente, para que el contenido se abra en la misma página (como Twitter (feed de tweets) y facebook (noticias)).

La versión de php/html (que se abre una página en una nueva pestaña) es

echo '<a href="http://'. $_SERVER['HTTP_HOST'] .'/'.$domain_page.'?form='.$form_id.'&page='.($page+1).'">Load more entries&rsaquo; </a>'; 

El Javascript/Ajax versión:

<div id="call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="ajax-load-more"> 

       <img id="spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="spin" src="<?php bloginfo('template_directory'); ?>/images/main-ajax-loader.gif" style="display:none" alt="" /> 

       <a class="ajax" href="javascript:$ajax_hv('#spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeIn(200); 

       $ajax_hv('#ajaxentries_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').load('form='<? echo $form_id; ?>&page=<?php echo $page+1;?>', {}, 

       function(){ $ajax_hv('#call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeOut();})">Load more entries... 

       </a> 

Answer 1

La idea básica es escuchar a desplazarse eventos, y poner en práctica de paginación en el lado del servidor.

Un evento scroll se activa cuando el documento o un elemento HTML contenido se desplaza. Usaré este boceto como referencia teniendo en cuenta lo siguiente:

Digamos que la altura de la ventana del navegador es de 800px, y la altura inicial del contenido es de 2500px. El umbral para cargar contenido AJAX es cuando el usuario se desplaza a la parte inferior de 100px de nuestro contenido (después de los primeros 2400px).

alt text http://i44.tinypic.com/1x443.jpg

Tendremos que hacer un seguimiento de los siguientes 2 artículos:

1. artículos/páginas cargadas hasta el momento.
2. ¿Qué tan lejos estamos de la parte inferior de la página.

Las referencias de código están en MooTools, pero el concepto es el mismo. Convertirlo a jQuery es una tarea trivial una vez que lo entiendes.

var maxPage = 1; 
var threshold = 100; 

Necesitamos saber cada vez que la página se desplaza, por lo que agregar un controlador para scroll events. Encuentra la distancia de desplazamiento hacia la parte inferior de la página. Si es menor que el umbral definido (100 px), desactive una solicitud de AJAX cargando la siguiente página. Cuando llegue la respuesta (si tiene éxito), agréguela a la página e incremente el número máximo de páginas.

Otra cosa a tener en cuenta es solo disparar una solicitud AJAX si el contenido no se está cargando. Tenga una bandera que indique si la solicitud de la página aún está pendiente.

var isLoading = false;

window.addEvent('scroll', function() { 
    // the height of the entire content (including overflow) 
    var contentHeight = window.getScrollSize().y; 
    // current scroll is height of content that's above the viewport plus 
    // height of the viewport. 
    var contentScrolled = window.getScroll().y + window.getSize().y; 
    var distanceToBottom = contentHeight - contentScrolled; 
    var closeToBottomOfPage = distanceToBottom < threshold; 
    var shouldLoadMoreContent = !isLoading && closeToBottomOfPage; 

    if(shouldLoadMoreContent) { 
     // create an ajax request 
     var request = new Request({ 
      url: 'http://www.example.com/more', 
      onSuccess: function(responseText) { 
       $('page').append(responseText); 
       maxPage++; 
      }, 
      onRequest: function() { 
       isLoading = true; 
      }, 
      onComplete: function() { 
       isLoading = false; 
      } 
     }); 
     // fire off ajax request with the page # as a querystring param 
     request.send({page: maxPage}); 
    } 
} 

Answer 2

comúnmente llamado un desplazamiento infinito. Hay plugins para jQuery y Wordpress:

http://www.infinite-scroll.com/