¿Cómo funciona la carga lenta de imágenes usando JavaScript?

Question

Tengo curiosidad acerca de cómo la carga lenta de imágenes, imágenes que se cargarán cuando se desplazan hacia ellas, funciona.

¿Alguna pista?

Answer 1

Aquí es un how-to, el uso de plugins: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ aquí está el plugin jQuery: http://www.appelsiini.net/projects/lazyload

básicamente se pone un maniquí en su atributo src y añadir otro atributo de la imagen real, JS detecta la posición de desplazamiento de la página, y carga los datos de imagen una vez que te acercas lo suficiente a la imagen. lo hace reemplazando el src con la fuente de la imagen real.

aquí otra explicación: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/

Answer 2

Hay muchas maneras de implementar la carga diferida. El proceso es solo que cargas lo que necesitas. Puedes cargar cualquier cosa en la escena del software. En los sitios web la mayoría lo usa cuando carga imágenes y es porque la mayoría del sitio web es solo imágenes. Me refiero a la obra de arte del sitio web más las imágenes reales de las personas que podrían tener miles de imágenes en su servidor. Esto normalmente causa una desaceleración cuando intentas cargar todos al mismo tiempo. En algún punto, comienza a ralentizar el proceso. Por lo tanto, la carga diferida normalmente se realiza para sitios web grandes. Como dije, puedes hacerlo de muchas maneras. una forma ya fue dada. Ten la etiqueta de img ya cargada, pero la parte src señala a un archivo ficticio algo que es de pequeño tamaño. No use una imagen que sea gráfica o una imagen ... use algo como un bloque gris ... o no podría usar nada. Luego, cuando la parte de desplazamiento está cerca del punto de desplazamiento donde las imágenes están cerca. Ejecutará una función donde reemplazará el src con el enlace de la imagen real. Otra forma es usar ajax y el punto de desplazamiento cuando close se anexará ... cargar en el código html real con la imagen en el src. Esto es lo que realmente uso. Escribo un archivo PHP para cargar imágenes, datos, texto.

El objetivo de este método es descargar los archivos de un sitio web cuando sea necesario. Cuando se carga una imagen, en realidad se está descargando desde su servidor. Por lo tanto, el proceso de descarga más el tiempo de carga real puede aumentar cuando comienza a tratar con archivos de imagen más grandes y demasiados.

Answer 3

Puede utilizar justlazy, que es independiente de las dependencias como jQuery y muy ligero:

La única llamada que necesita es:

var placeholders = document.querySelectorAll(".load-if-visible"); 
 
for (var i = 0; i < placeholders.length; ++i) { 
 
    Justlazy.registerLazyLoad(placeholders[i]); 
 
}

Los marcadores de posición tiene que ser el siguiente estructura:

<span data-src="url/to/image" data-alt="some alt text" 
 
     data-title="some title" class="load-if-visible"> 
 
</span>

Por razones de SEO que puede utilizar cualquier otro marcador de posición (por ejemplo, imagen de marcador de posición).

Además, hay una guía sobre cómo usarlo y algunas cosas generales sobre la carga diferida de imágenes.

Answer 4

Y un ejemplo de cómo hacerlo, fácilmente.

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg"> 

The "lazy.jpg "se puede utilizar en todas las imágenes, lo que dará como resultado que solo se cargue una imagen (y es una imagen de 1x1px de peso pequeño). Por lo tanto, considere que tengo una lista de 250 tiendas para visitar, con un logotipo de la compañía para cada . Podría tener este aspecto:

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg"> 
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg"> 
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg"> 
... 

Luego viene la magia Ponga esto en su archivo javascript:

$('img[src="/images/lazy.jpg"]').each(function(index, el) { 
    $(el).attr('src', $(el).data('real-src')); 
}); 

Y wacka-wacka, todas las imágenes lazy.jpg serán reemplazados por sus " imágenes reales. El propósito es que la página html se cargue más rápido (ya que esas 250 compañías tienen el mismo "logo" en lazy.jpg :) ... Pero el JS se encarga de todo después de finalizar el DOM. d cargado

Esta es una solución de jQuery, por supuesto. Se puede hacer con js puro, también.

Answer 5

Lazy carga de imágenes utilizando forma convencional de fijación de escucha para desplazarse eventos o haciendo uso de setInterval es altamente no performant ya que cada llamada a getBoundingClientRect() obliga al navegador a re-layout la página completa e introducirá una considerable jank a su página web.

Uso Lozad.js (a sólo 569 bytes sin dependencias), que utiliza InteractionObserver a cargar imágenes perezosos performantly.