Les URL d'images ajoutées à la charge ionique après la détermination de la hauteur

Question

J'ai dû résoudre un problème avec une expérience limitée de cette technologie et j'ai du mal à trouver une solution. Je crois que je sais maintenant pourquoi le problème est causé, mais je ne sais pas comment y remédier.

J'ai une page qui fait une demande à un serveur distant afin d'aller chercher une liste, dont l'une des valeurs est un lien contenant une image qui doit être montrée. Malheureusement, ce qui se passe, c'est que nous récupérons ces éléments, les ajoutons tous dans la liste, puis la liste calcule sa taille. Puis les images se chargent, et tout dépasse.

<ion-list [virtualScroll]="info" #infoList id="infoList"> 
    <ion-item *virtualItem="let item"> 
    <div [innerHTML]="item.innerHTML"></div> 
    </ion-item> 
</ion-list> 

Tous les conseils sur la façon dont je peux faire la liste d'ions à recalcule sa hauteur ou faire programmation ainsi?

Answer 1

Commencez par charger les images, puis affichez-les. Ce qui signifie que le navigateur charge l'image et que c'est ce qu'il a fait qu'il construit la vue Cela peut être fait avec ci-dessous js.

var imageObj = new Image(); 
imageObj.onload = function() { 
    // this is called when image is loaded. 
}; 
imageObj.src = image;