1

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

Kicker
  • 606
  • 1
  • 12
  • 27
  • Possible duplicate of [jquery div when all images loaded](http://stackoverflow.com/questions/13893908/jquery-div-when-all-images-loaded) – JBux Jan 26 '16 at 06:49

1 Answers1

0

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..

Kicker
  • 606
  • 1
  • 12
  • 27