Svelte Lazy load not working on sheet modal

1

Hello,

I am tried to initialised Lazy-load on svelte based framework7 application.
Where i tried to use image on background of Link

Code is below:

<Link icon='<icon>' data-background='<image>' class='lazy'/>

I am initialise lazy load using sheet reference
For example:

<Sheet bind:this={sheet} on:sheetOpened={opened} class='images-list'>
     <Block>
      <Link icon='<icon>' data-background='<image>'  class='lazy'/>
      <Link icon='<icon>' data-background='<image>'  class='lazy'/>
      <Link icon='<icon>' data-background='<image>'  class='lazy'/>
      ...
      ...
    </Block>
</Sheet>
<script>
import {f7, Sheet, Block, Link} from 'framework7-svelte';
let sheet;
function opened(){
  f7.lazy.create(sheet);
}
</script>
<style>
:global(.images-list a){
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 4px;
  height:40px;
  width:40px;
}
</style>
2

https://framework7.io/docs/lazy-load.html

Note, that lazy images and elements should be inside of scrollable <div class="page-content"> to work correctly

Sheet modal is not really a proper place for using lazy loading

3

Actually Inside sheet modal, I have added tab with page-content but its not working.

<Tab id="images" tabActive on:tabShow={tabShow}>
    <PageContent>
            <Block class="no-margin no-padding">
                <ul>
                    {#each myImages as image}
                        <li>
                            <Link data-background='{image}' class="lazy lazy-fadeIn" style1="background-image:url({image})">
                            </Link>
                        </li>
                    {/each}
                </ul>
            </Block>
    </PageContent>
</Tab>
<script>
.........

function tabShow(){
      f7.lazy.create(f7.$("#images .page-content"));
}

.........
</script>

I have also tried to replace Link component with core code like this but still no luck.

<Link data-background='{image}' class="lazy lazy-fadeIn">
                            </Link>

with

<a data-background='{image}' class="link lazy lazy-fadeIn">

if I add style on link then it will work without lazyload.
I want to load this image in Link background with lazy load functionality.

4

Still, I not get any solution on this.
Any have solution to add lazy load in Sheet model, with Svelte?

Thanks in advance