He notado esto en numerosos sitios web "modernos" (por ejemplo, búsqueda de imágenes de Facebook y Google) donde las imágenes debajo del pliegue se cargan solo cuando el usuario se desplaza hacia abajo en la página lo suficiente como para llevarlos dentro de la región de la ventana gráfica visible ( al ver la fuente, la página muestra X número 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 complemento de jQuery que pueda lograr este comportamiento con una codificación mínima?
Bonificación: alguien puede explicar si hay un evento "onScrolledIntoView" o similar para elementos HTML. Si no, ¿cómo funcionan estos complementos?
Algunas de las respuestas aquí son para página infinita. Lo que pide Salman es la carga diferida de imágenes.
EDITAR: ¿Cómo funcionan estos complementos?
Esta es una explicación simplificada:
Se me ocurrió mi propio método básico que parece funcionar bien (hasta ahora). Probablemente hay una docena de cosas que algunos de los guiones populares abordan 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 mire el nuevo Intersection Observer como lo menciona Apoorv y lo explica desarrolladores.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 de 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 su navegador no desperdicie recursos jugando con las imágenes que ya se han cargado)
Agregar al código existente
Para convertir su html, en un editor simplemente busque y reemplace src=" con src="" data-src="
( Editar: reemplazó los enlaces rotos con copias archivadas)
Dave Artz de AOL dio una excelente charla sobre optimización en la jQuery Conference Boston el año pasado. AOL usa una herramienta llamada Sonar para carga a pedido basada en la posición de desplazamiento. Verifique el código para conocer los detalles de cómo compara scrollTop (y otros) con el desplazamiento del elemento para detectar si parte o todo el elemento es visible.
Dave habla sobre Sonar en estas diapositivas . Sonar comienza en la diapositiva 46, mientras que la discusión general sobre "carga según demanda" comienza en la diapositiva 33.