Ng-lazyload-image: Lazyload y srcset

Hola,

Desafortunadamente, esta biblioteca no es compatible con srcset, pero debería admitirlo. Es una característica bastante importante.

Dicho esto, no es muy fácil de admitir, ya que necesitamos analizar y comprender el srcset de la misma manera que lo hace el navegador.

Opción 1:

Tratamos srcset como un caso especial y no intentamos cargar la imagen en segundo plano, sino que simplemente configuramos el srcset cuando la imagen es la ventana gráfica:
Digamos que tenemos la siguiente etiqueta html:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Cuando la imagen está en la ventana gráfica, echamos un vistazo a srcset y detectamos que lazyLoad contiene una cadena srcset y simplemente transformamos la etiqueta en:
<img srcset="small.jpg 300w, large.jpg 500w">

Pro:
Implementación simple
Estafa:
El usuario nunca verá "defaultImage".
Nunca podemos manejar un error de red mientras cargamos la imagen.

Opcion 2:

Analizamos srcset y elegimos la mejor opción (como pensamos que debería haber hecho el navegador).
Digamos que tenemos la siguiente etiqueta html:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Detectamos que lazyLoad contiene un srcset y analizamos la cadena a algo como:
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
Lo comparamos con el ancho del navegador (y la proporción de píxeles del dispositivo ) y elegimos la mejor imagen. Carga la imagen en segundo plano y cuando se carga simplemente configuramos srcset y como la imagen está en el caché, se cargará inmediatamente.

Pro:
La imagen se cargará de forma diferida 🎉
El usuario verá la imagen predeterminada.
Podemos manejar errores de red (¿deberíamos intentar cargar alguna otra imagen desde srcset o deberíamos simplemente cargar la imagen de error ?).
Estafa:
Siempre es complicado analizar una cadena de la misma manera que el navegador debería haberlo hecho; Probablemente perdamos algún caso de uso de Edge.
Según tengo entendido, el navegador siempre usará la imagen más grande si está almacenada en la caché. Dado que no tenemos forma de saber si la imagen ya se ha cargado, tenemos que cargar la imagen que mejor se ajuste (pero la imagen más grande se mostrará después de que establezcamos srcset ). por ejemplo, digamos que tenemos el siguiente srcset small.jpg 300w, large.jpg 500w y la pantalla tiene menos de 500 px pero large.jpg ya está cargado. Según tengo entendido, el navegador debería haber marcado large.jpg ya que está en el caché, pero como no sabemos que cargaremos small.jpg y cuando esté cargado configuraremos srcset y el navegador seleccionará large.jpg (sin embargo, puedo estar equivocado). es decir, cargamos innecesariamente una imagen.

Conclusión:

Creo que la opción 2 es factible (no debería ser demasiado difícil) y creo que deberíamos hacerlo. Sin embargo, mi tiempo es bastante limitado en este momento, pero acepto felizmente un PR :)

Hola @tjoskar , gracias por la rápida respuesta, estoy de acuerdo contigo en que la segunda opción podría ser factible. Tampoco tengo demasiado tiempo en este momento ya que estoy en algunos plazos, pero en cuanto tenga más tiempo me gustaría contribuir a esta función, especialmente considerando que ya extendí el comportamiento de la biblioteca para admitir lazy cargando para la etiqueta de imagen con la propiedad hlink.href :)

O ignore la opción predeterminada del navegador srcset e impleméntela como su propio proceso de toma de decisiones y ajústela con el tiempo para hacerlo lo mejor posible :)

Especificaciones

Solo tiene que cumplir con la especificación y creo que la especificación es bastante sencilla.

Pero como señaló, la implementación del navegador puede romper lo que desea lograr aquí, por lo que creo que debería omitirse.

Envié una solicitud de extracción (# 231) que agrega el soporte de imagen receptiva a ambos \ Estoy esperando alguna entrada.

Esto está incluido en 3.4.0 . Gracias @sapierens