Detect images loaded in bootstrap modal with jQuery

Question

I have a button on my page for open bootstrap modal with thousands of images in unordered list like this: ul > li.thumbnail > img.image . I need to show a fullscreen loader after modal is opened and hide loader after images are loaded. But there is not strict count of li elements. Do you have any idea how can I do this? Thank you!

//EDIT

but I dont need to load it on full page load, I want to load it on modal open

Answer 1

I have a possible solution

var loader = $('#loading'); //fullscreen loading animation
$("#lg-modal").on('show.bs.modal', function (e) {
        loader.css({ 'display': 'block' });
        $(window).load(function () {
            loader.css({ 'display': 'none' });
        });
    });

It works correctly (I need some more tests) for now. Do you have any ideas or better way for this? Thanks!

EDIT: this is not correct solution, because when modal is loaded, and I show loaded modal, page is not loading any content..