Cargando solo la parte visible de un DOM, y eliminar elementos DOM que no están visibles en la ventana

Question

Estoy creando una aplicación donde el contenido nuevo se carga en un div (usando AJAX) mientras se desplaza hacia abajo, lo que permite al usuario leer todo contenido en modo continuo (sin navegación). Pero el problema es que, dado que todo el contenido es un desplazamiento continuo muy grande, se carga incrementalmente todo el contenido en DOM, lo que hace que el navegador sea realmente lento.

¿Es posible utilizar javascript/jQuery, para eliminar los elementos de DOM que no están visibles en la ventana gráfica y volver a cargarlo cuando el usuario se desplaza hacia arriba?

Answer 1

Sugiero que si la carga de la página se está volviendo muy lenta, utilice un método diferente para cargar y mostrar su contenido.

O bien, vuelva a procesar el contenido que está mostrando.

La razón por la que esto funciona en Facebook y Twitter es porque el contenido que se está cargando es muy "ligero" (es decir, solo unas pocas piezas de texto y algunas imágenes pequeñas).

Answer 2

Esto es muy posible.

Ej: (pega esto en la consola del navegador en esta página para mostrar el efecto)

$(window).scroll(function() { 
    var threshold = 0; // how many pixels past the viewport an element has to be to be removed. 
    $('.answer').each(function() { 
     if($(this).offset().top + $(this).height() + threshold < $(window).scrollTop()) {  
      $(this).remove() 
     } 
    }); 
    // handle loading scroll up the same way you're adding new content as you scroll down. 
});