V6 lazy load does not work with template literals

1

When using lazy load to load images inside template literals images are not being loaded anymore!

this works!

<div data-background="https://image_sample.jpg" class="lazy"></div>

but this code below does not work and the images are not being loaded! this only happens when lazy load is inside template literals as shown below:

${images.value.map((i) => $h`

  <div data-background="${i.urlPath}" class="lazy"></div> //does not work anymore

`)}

Any solution for this! or is this a bug?
thanks

2

Did you try with app.lazy.create?

See: https://framework7.io/docs/lazy-load.html#lazy-load-app-methods

1 Like
3

I have this on my app.js set:

var app = new Framework7({
  lazy: {
    threshold: 50,
    sequential: false,
  },
});

and I use lazy load for the DOM like this:

<... class="lazy">

the issue is that with template literals using:

${images.value.map((i) => $h`

  <div data-background="${i.urlPath}" class="lazy"></div> //does not work anymore

`)}

and if you check the console and view source you will see that lazy load is not working because the view source it is showing this:

 <div data-background="url_image.jpg" class="lazy"></div> //lazy not loaded

if lazy is loaded it must show the view source like this, but that is not the case:

 <div data-background="background-image: url("url_image.jpg")" class="lazy-loaded"></div>

So I guess lazy event is not being fired when it is inside template literals specially when inside map for looping an array like this:

${images.value && $h`

   ${images.value.map((i) => $h`
      <div data-background="${i.urlPath}" class="lazy"></div> //does not work anymore and lazy not being loaded!
   `)}

`}

any solution when you use Lazy Load to fire DOM events on lazy elements?

<... class="lazy">...?

I do appreciate any solution or tips to make this work!
thanks

4

I belive that you need to do $f7.lazy.create('.page-content') or trigger the lazy load with $$ ('div.lazy').trigger('lazy');

Do it after the rendered dom with images (after you assign the images to “images” array).

If not, prepare a demo jsfiddle so that I can help you

1 Like
5

thank you!

It is very curious that lazy loading is not working inside template literals but it is working fine with swiper slider images loading perfectly in template literals! I thought maybe lazy loading has a bug in v6!!

I will try do that you say, but if I take the lazy loading outside the template literals everything start working fine!

I will see if this is working using that way! if not I will try to find a clean solution…
thanks for the tip!

6

I tested out everything and I found out the only solution for the issue with lazy loading inside template literals is to run this:

$f7.lazy.create('.images-grid');

thanks!

1 Like