es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar la imagen completa después de que se haya completado la carga en Angular 12.

13 Jul, 2023 Programación

Leo la imagen src con la API desde el servidor.
Quiero que la imagen no se muestre hasta que se haya cargado completamente y que en su lugar se muestre el esqueleto mientras se carga (las imágenes se muestran en secciones y quiero que el esqueleto se destruya cuando la imagen se muestre completamente).
Este es mi código, pero no está funcionando como se espera.

HTML:

<div class="col-12 p-0">
    <ngx-skeleton-loader *ngif="imgLoad == false" count="1" [theme]=" 
        {'borderradius':'7', 'background-color': '#ccc','margin-top':'0', 'min-height': 
        '25vh','width':'100%'}"></ngx-skeleton-loader>
    <img (load)="loadImage()" [hidden]="imgLoad == false" src="assets/image/job1.jpg" alt="" class="w-100 h-auto image-border">
</div>

TS:

imgLoad:boolean = false;

loadImage(){
    this.imgLoad = true;
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la carga lenta de imágenes con un marcador de posición de esqueleto utilizando tu código existente, puedes hacer las siguientes modificaciones:

    HTML:

    <div class="col-12 p-0">
  <ngx-skeleton-loader *ngif="imgLoad === false" count="1" [theme]="{ 'borderradius': '7', 'background-color': '#ccc', 'margin-top': '0', 'min-height': '25vh', 'width': '100%' }"></ngx-skeleton-loader>
  <img [hidden]="imgLoad === false" src="assets/image/job1.jpg" alt="" class="w-100 h-auto image-border" (load)="loadImage()">
</div>

    TS:

    imgLoad = false;

loadImage() {
  this.imgLoad = true;
}

    Explicación:

    • El elemento ngx-skeleton-loader solo se muestra si imgLoad es false, lo que significa que la imagen aún no se ha cargado.
    • El elemento img se oculta usando la directiva [hidden] hasta que imgLoad sea true (es decir, la imagen se ha cargado).
    • El evento load en el elemento img activa la función loadImage(), que establece imgLoad en true, lo que provoca que el ngx-skeleton-loader se oculte y se muestre la imagen.
    • Utiliza === en lugar de == para una comparación estricta de igualdad en JavaScript.

Comments are closed.