Images in modal content not lazy loading

[oriol]

Hi, I have a gallery setup on this page:

Affordable Logo Design & Graphic Design – Logoglo

And its using a modal to act as a lightbox.

It works well, however, it is not lazy loading the images within the modal. I tested by removing the modal, and keeping the gallery, and the images lazy load.

Any ideas on how to fix this?

[ruenel]

Hello @Oriol,

Thanks for writing in! Are you using a Looper in loading those images? When I checked your site, the images that are loaded in a slider which is also in a modal are lazyloaded. You can check it when you view the source code of the page.

Best Regards.

[oriol]

They are using a looper yeah…and yes, but as you can see, they are loading, the gallery is further down the page, so those images shouldn’t load.

This video shows what I mean:

If I remove the modal popup, which contains the slider, and the same images as the gallery (it acts as a lightbox)

You see, the gallery lazyloads as it should, you can see here:

[charlie]

Hello,

I’ve looked into this and it is a similar issue to our current Dropdowns. The problem being that they are still on the page just hidden with opacity: 0. In 6.4 we will have this fixed for dropdowns and shortly after we plan on bringing this new animation system to modals and off-canvas.

Using the following in your modal element, will get lazy loading working properly. However you will lose all animations for the modal. Thanks for bringing this up!

$el.x-modal {
  display: none;
}

$el.x-modal.x-active {
  display: unset;
}

[oriol]

Perfect! that did the trick! thanks man!

[prakash_s]

You are most welcome @oriol