Bannière de chargement paresseux Vue

Question

J'ai 5 bannières sur la page qui s'affichent ou se masquent en fonction des clics des utilisateurs.

À ce stade, les données de la bannière proviennent de l'API et j'itère le composant de bannière pour chaque entrée de bannière sur l'API. Avez-vous une idée de la manière dont je peux télécharger l'image uniquement après que l'utilisateur a cliqué ? J'ai essayé le comportement natif de chargement paresseux mais les images se chargent au début car elles apparaissent toutes sur le premier défilement et j'affiche ou masque les images par clic de l'utilisateur.

<banner-base
    v-for="banner in entry.banners"
    :key="banner.id"
    :slug-ficha="slugSelected"
    :promo-selected="promoSelected"
    :banner-id="banner.id"
/>

Answer 1

Vous pouvez le faire dans la directive img 元素上使用 v-show et cela n'apparaîtra que lorsque vous cliquerez sur la bannière.