Vanilla-lazyload: How to use lazy load with Bootstrap modal?

[ghost]

I am using this theme:

https://startbootstrap.com/template-overviews/agency/

and in agency.js I added:

var lazyLoad = new LazyLoad();
$('.modal').on('shown.bs.modal', function () {
    lazyLoad.update();
});

but the problem is that when the modal which contains many images is opened all of them get loaded instantly. I would like them to load lazily, i.e. when scrolling down.

How can I do that?

[ghost]

In fact I notice that the last few images in the modal often don't show unless the window is resized, moved or the view is zoomed in/out using Ctrl and +/-

I hope you can help.

[verlok]

Hi @anchev and thanks for choosing my LazyLoad.

If I understood correctly, the images you want to load lazily are inside the modal you are opening via javascript, and the modal has a scrolling panel inside it.

If so, you need to initialize a new LazyLoad when the modal is shown, and pass the scrolling container in the container option.

Something like:

$('.modal').on('shown.bs.modal', function () {
    var lazyLoad = new LazyLoad({
         container: $(this) /// <--- not sure if this works here, read below
    });
});

In the container you need to pass the element that scrolls (so the one that has the overflow property set to scroll or auto).

You could also call lazyLoad.destroy() when the modal is closed, in order to save memory and do everything properly.

I hope this helps. If you want help I can give it to you, but you'll need to share more of your HTML, CSS and JS code so I can understand where exactly the problem is.

[ghost]

Thanks for the reply. However it seems to me I didn't explain correctly.

I want to have lazy load both on the main page, as well as in the modals. So as far as I understand the lazyLoad object must be created initially (right?) Then the question is how to make it work also for the modal.

I hope that clarifies what I am looking for.

[ghost]

I think I figured it out:

var globalLazyLoad = new LazyLoad();

var modalLazyLoad;
$('.modal')
        .bind('shown.bs.modal', function () {
            modalLazyLoad = new LazyLoad({
                container: this
            });
        })
        .bind('hidden.bs.modal', function () {
            modalLazyLoad.destroy();
        });

It seems to work. Could you please confirm if this is the right way to do it?

[verlok]

Yess!!! That's correct. Congratulations.

[ghost]

Thank you!

[verlok]

Psst: have you already starred this repo? All you need to do is to press the Star ★ button on the top right corner of the website. ;)

[jakeman1031]

I'm working on getting this modal to work the same way. Cant seem to get it working with the same code. Can I re-open this?