Vue Lazy-Loading-Banner

Question

Ich habe 5 Banner auf der Seite, die je nach Benutzerklicks angezeigt oder ausgeblendet werden.

Zu diesem Zeitpunkt kommen die Bannerdaten von der API und ich iteriere die Bannerkomponente für jeden Bannereintrag in der API. Haben Sie eine Idee, wie ich das Bild erst herunterladen kann, nachdem der Benutzer darauf geklickt hat? Ich habe das native Verhalten „Lazy Loading“ ausprobiert, aber die Bilder werden zu Beginn geladen, da sie alle beim ersten Scrollen angezeigt werden und ich die Bilder durch Klicken des Benutzers ein- oder ausblenden kann.

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

Answer 1

您可以在 img 元素上使用 v-show 指令，它仅在单击横幅时显示。