Ng-lazyload-image: La imagen predeterminada no es visible

Hola,

La página de ejemplo usaba el siguiente estilo CSS:

img {
  opacity: 0;
}
img.ng2-lazyloaded {
  opacity: 1;
}

por ejemplo, se pretendía ocultar la imagen (y la imagen predeterminada) hasta que se cargara la imagen de carga diferida.

Sin embargo, si elimina opacity: 0; , debería poder ver la imagen predeterminada antes de que se cargue la imagen de carga diferida.

He actualizado la página de ejemplo con algunos ejemplos más. Vaya a http://tjoskar.github.io/ng2-lazyload-image/ y haga clic en "Imagen predeterminada" para ver un ejemplo del uso de imágenes predeterminadas.
Si está utilizando Chrome, también puede utilizar la "limitación de la red" en las herramientas de desarrollo para simular un tiempo de carga más largo.

¿Respondí tu pregunta?

Tiene un código de ejemplo aquí: https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts

@tjoskar Lo he intentado todo, todavía no funciona, la imagen predeterminada no aparece en absoluto y la ruta es correcta porque si reemplacé la imagen del Lazyloder con la imagen predeterminada y se carga la imagen predeterminada, el problema es cuando verifiqué herramienta de inspección de google chrome, veo que no hay ningún lugar donde la imagen predeterminada se adjuntó al atributo src de la imagen, en su lugar, la imagen de lazyloader se adjunta de manera predeterminada. Por favor, ¿hay alguna otra forma de evitar esto? Esperando por tu respuesta.

Gracias

@kelvinrolex , no estoy seguro de seguir. Si la imagen que debe cargarse en forma diferida ya está en la memoria caché del navegador, la imagen predeterminada nunca estará visible. El algoritmo sigue:

1. Establecer imagen predeterminada en src
2. Comprueba si la imagen está en la ventana gráfica.

2.1 Si la imagen está en la ventana gráfica, comience a descargar la imagen de carga diferida
2.1.1 Cuando se descarga la imagen de carga diferida, configure la imagen de carga diferida en src
2.2 De lo contrario, vaya al 2

Grabé un video para mostrar cómo se carga la imagen predeterminada: https://www.youtube.com/watch?v=p4hds8Au_qI

¿Tiene un fragmento de código que pueda compartir para que yo pueda comprender mejor lo que está tratando de hacer?

Gracias

Parece que tengo el mismo problema. Si uso [src] = "defaultImage" (y, por supuesto, tengo una propiedad defaultImage), el atributo src de la etiqueta img no se escribe antes de que se cargue la imagen (entra en el puerto de visualización).

Si no uso ningún enlace de propiedad (por ejemplo:

@taseroth , Perdón por la respuesta tardía. ¿Qué navegador y sistema operativo estás usando? No puedo reproducir esto en Chrome / Firefox / Safari en macOS.
Para ser claro; si visita http://tjoskar.github.io/ng2-lazyload-image/fade-in-image y luego presiona el enlace "imagen predeterminada". Entonces, ¿no ves ninguna imagen en la jaula de Nicolas?

Tengo el mismo problema. La imagen predeterminada es renderizada con asentimiento (solo si la pongo explícitamente con "src" y URL de marcador de posición codificada).
También he notado que "scrollspy" no funciona correctamente, algunas veces lasyload carga los primeros 2 o 3 elementos y
todos los demás se mantendrán sin cambios incluso después de un desplazamiento "intenso" XD. El parámetro de compensación parece no afectar este problema. Hay un truco: si vuelvo a cargar la página y me desplazo hacia abajo antes de que se carguen los contenedores, se cargan todas las imágenes ...
No hay errores en la consola ni durante la compilación.

@ bsh314 , no lo sigo.

La imagen predeterminada es renderizada con asentimiento (solo si la pongo explícitamente con "src" y URL de marcador de posición codificada).

Debe usar src para la imagen predeterminada.
Digamos que está usando el siguiente código: <img [src]="defaultImage" [lazyLoad]="image"> . Angular lo compilará y le dará <img src="default-image.jpg"> al navegador (dado defaultImage = 'default-image.jpg' ) y cuando la imagen esté en la ventana gráfica, la directiva (ng2-lazyload) actualizará el nodo de imagen a <img src="lazyload-image.jpg"> (dado image = 'lazyload-image.jpg' ).

También he notado que "scrollspy" no funciona correctamente ...

¿Está haciendo referencia a bootstraps scrollspy ? ¿Puedes reproducir el error sin scrollspy?

@tjoskar No, no estoy usando bootstrap, esa era solo la forma de nombrar ese tipo de funcionalidad.
Mi problema de imagen predeterminado:
<img src="default-image.jpg" [lazyLoad]="image"> -> esto funciona
<img [src]="defaultImage" [lazyLoad]="image"> -> esto no funciona
¡Gracias por la respuesta!

Tengo el mismo problema. Solo funciona si la URL de img está codificada en la plantilla.
Lo tiene codificado en su ejemplo:

// https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts
<img
        *ngFor="let image of images"
        src="https://www.placecage.com/1000/1000"
        [errorImage]="errorImage"
        [lazyLoad]="image">

Editar: Y tal vez también funcione si AOT puede codificar la URL en la plantilla para usted. En mi caso, obtengo la URL de imagen predeterminada de mi llamada API anterior, por lo que es dinámica. Mi objetivo es utilizar la imagen predeterminada como una vista previa de baja calidad y una imagen de mayor calidad de carga diferida para reemplazarla.

@filipsuk : sí, ese parece ser el problema. No puedo creer que me perdí ese detalle.

Este problema debería resolverse en la versión 2.3.2 . Por favor inténtalo.

El problema de

Voy a cerrar esto ahora. Por favor, avíseme si alguno de ustedes todavía tiene el problema.