javascript - tablas - Cómo cargar imágenes dinámicamente(o de forma perezosa) cuando los usuarios las despliegan a la vista

obtener datos de una tabla html javascript

Question

Me he dado cuenta de esto en numerosos sitios web "modernos" (por ejemplo, búsqueda de imágenes de facebook y google) donde las imágenes debajo del doblez solo se cargan cuando el usuario se desplaza por la página lo suficiente para ubicarlas dentro de la región de visualización visible ( en la fuente de visualización, la página muestra X cantidad de etiquetas <img> pero no se obtienen del servidor de inmediato ). ¿Cómo se llama esta técnica, cómo funciona y en cuántos navegadores funciona? Y hay un plugin jQuery que puede lograr este comportamiento con una codificación mínima.

Editar

Bonificación: alguien puede explicar si hay un evento "onScrolledIntoView" o similar para elementos HTML. Si no, ¿cómo funcionan estos complementos?

Answer 1

La carga lenta de imágenes al unir el oyente a eventos de desplazamiento o mediante el uso de setInterval es altamente improductivo ya que cada llamada a getBoundingClientRect () obliga al navegador a re-layout la página completa e introducirá considerable jank en su sitio web.

Use Lozad.js (solo 569 bytes sin dependencias), que usa developers.google para cargar imágenes de forma perezosa.

Answer 2

Algunas de las respuestas aquí son para páginas infinitas. Lo que Salman está pidiendo es la carga lenta de imágenes.

Plugin

Demo

EDITAR: ¿Cómo funcionan estos complementos?

Esta es una explicación simplificada:

1. Encuentra el tamaño de la ventana y encuentra la posición de todas las imágenes y sus tamaños
2. Si la imagen no está dentro del tamaño de la ventana, reemplácela con un marcador de posición del mismo tamaño
3. Cuando el usuario se desplaza hacia abajo y la posición de la imagen <desplazamiento + altura de la ventana, la imagen se carga

Answer 3

Dave Artz de AOL dio una gran charla sobre optimización en jQuery Conference Boston el año pasado. AOL usa una herramienta llamada Sonar para carga bajo demanda basada en la posición de desplazamiento. Compruebe el código para conocer los detalles de cómo se compara scrollTop (y otros) con el desplazamiento del elemento para detectar si parte o todo el elemento está visible.

jQuery Sonar

Dave habla de Sonar en estas diapositivas . Sonar comienza en la diapositiva 46, mientras que la discusión general de "carga a petición" comienza en la diapositiva 33.

Answer 4

Este enlace funciona para mi demo

1. Cargue el complemento jQuery loadScroll después de la biblioteca jQuery, pero antes de la etiqueta de cuerpo de cierre.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2. Agregue las imágenes a su página web utilizando el atributo Html5 data-src. También puede insertar marcadores de posición utilizando el atributo src de img normal.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. Llame al complemento en las etiquetas img y especifique la duración del efecto fadeIn a medida que las imágenes se ponen a la vista

$(''img'').loadScroll(500); // in ms

Answer 5

Estoy usando jQuery Lazy . Me llevó aproximadamente 10 minutos probar y una o dos horas para agregar a la mayoría de los enlaces de imagen en uno de mis sitios web ( CampusCube ). No tengo ninguna (ninguna / cero) relación de ningún tipo con el desarrollador, pero me ahorró mucho tiempo y, básicamente, ayudó a mejorar nuestra tasa de rebote para los usuarios de dispositivos móviles y lo valoro.

Answer 6

Hay un plugin de desplazamiento infinito bastante bueno here

Nunca he programado uno, pero me imagino que así es como funciona.

1. Un evento está vinculado al desplazamiento de la ventana

   $(window).scroll(myInfinteScrollFunction);

2. La función llamada verifica si la altura de desplazamiento es mayor que el tamaño de la ventana

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. Se realiza una solicitud de AJAX, que especifica el resultado # para empezar, cuántos captar y cualquier otro parámetro necesario para la extracción de datos.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. El ajax devuelve algo del contenido (el más probable es el formato JSON) y los pasa a la función loadnig.

Espero que tenga sentido.

Answer 7

Inventé mi propio método básico que parece funcionar bien (hasta ahora). Probablemente hay una docena de cosas que abordan algunas de las secuencias de comandos populares en las que no he pensado.

Nota : esta solución es rápida y fácil de implementar pero, por supuesto, no es excelente para el rendimiento. Definitivamente busque en el nuevo Intersection Observer mencionado por Apoorv y explicado por developers.google si el rendimiento es un problema.

El JQuery

$(window).scroll(function() {
    $.each($(''img''), function() {
        if ( $(this).attr(''data-src'') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data(''src'');
            $(this).attr(''src'', source);
            $(this).removeAttr(''data-src'');
        }
    })
})

Ejemplo de código html

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Explicado

Cuando se desplaza la página, se comprueba cada imagen en la página.

$(this).attr(''data-src'') - si la imagen tiene el atributo data-src

y qué tan lejos están esas imágenes de la parte inferior de la ventana ...

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

ajusta el + 100 a lo que quieras (- 100 por ejemplo)

var source = $(this).data(''src''); - obtiene el valor de data-src= aka la url de la imagen

$(this).attr(''src'', source); - pone ese valor en el src=

$(this).removeAttr(''data-src''); - elimina el atributo data-src (para que tu navegador no pierda recursos jugando con las imágenes que ya se han cargado)

Agregar al código existente

Para convertir su html, en un editor solo busque y reemplace src=" con src="" data-src="

Answer 8

La navaja suiza de carga ImageLoader de imágenes es la carga de imagen de YUI.

Porque hay más en este problema que simplemente mirar la posición de desplazamiento.