Image lazy loading for dynamic attached elements (best practice)

[stanleyxu2005]

• Framework7 version: v7.0.15
• Vue: v3.2
• Platform and Target: any

Describe the question

Image lazy loading is not automatically applied to images that are attached to DOM in runtime.

In my case, I have a page suppose to show movie list. The image urls need to be fetched from server. When server data is fetched, I will attach a list of images with class .lazy. But currently none of these images are fetched. So I assume the lazy and data-src are not triggered at all.

<template>
   <f7-page>

     <!-- this image will show -->
     <img class="lazy lazy-fade-in" data-src="path/to/image" />

     <div v-if=serverFetchedData>
       <!-- this image (attached to DOM in runtime) will NOT show -->
       <img class="lazy lazy-fade-in" :data-src="path/to/image" />
     </div>

   </f7-page>
</template>

After some investigation, I realized F7 will process .lazy elements when page is created/mounted. For other .lazy elements, that attached to DOM at runtime, it will require a manually triggering. https://framework7.io/docs/lazy-load#trigger-lazy-load-manually

I tried to monitor data loading changes via Vue's watch, and then manually trigger lazy. But it increases a lot of complexity. My current solution is to load data before entering the page.

I'd like to know, if there is a better (fully automated) solution to observe page changes and apply lazy effect for F7?

Thank you for any feedback

[Simone4e]

Seems like is not a bug, please close this issue and post that question here

[stanleyxu2005]

Agree. Initially I thought was a bug. But after digging more, it is not. Close it now.