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?
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 thelazy
anddata-src
are not triggered at all.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-manuallyI 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