I Have 5 banners on a page that are shown or hide depending on a user click selection.
At this point the banners data comes from an API and I am iterating a banner component for every banner entry I have on the API, Any idea on how i can get the image downloaded only after a user click? I have tried lazy-loading native behavior, but the images load at the beguinning because all of them appears at first scroll, I show or hide images with user click.
<banner-base
v-for="banner in entry.banners"
:key="banner.id"
:slug-ficha="slugSelected"
:promo-selected="promoSelected"
:banner-id="banner.id"
/>
You can use v-show directive on the img element and it will show only when the banner is clicked.