My website uses data-remote on a bootstrap modal to load images. You can see the code in this question () which I answered myself. The thing is that it might take a second or two to load the info so I would like to add a loading image (preferably the one used in fancybox). Im not 100% sure how to do this. It might be to add the image and when modal-open loads then remove the image. Im not 100% sure on how to do this and any help will be great! Thanks!

My website uses data-remote on a bootstrap modal to load images. You can see the code in this question (https://stackoverflow./a/21199283/2537559) which I answered myself. The thing is that it might take a second or two to load the info so I would like to add a loading image (preferably the one used in fancybox). Im not 100% sure how to do this. It might be to add the image and when modal-open loads then remove the image. Im not 100% sure on how to do this and any help will be great! Thanks!

• javascript
• jquery
• twitter-bootstrap

2 Answers 2

According to the docs, you can use the event listeners:

show.bs.modal and shown.bs.modal

$(function()
{
    $(".modal").on("show.bs.modal",function()
    {
        // add loader indicator
    });
    $(".modal").on("shown.bs.modal",function()
    {
        // remove loader indicator
    });
}

Your own answer to your other question does not have any javascript. So it's difficult to provide an answer that can be integrated into your current solution.

A loaded.bs.modal event will be present in Bootstrap v3.1.0 (see https://github./twbs/bootstrap/issues/10911); listening for this event is preferable to listening to shown.bs.modal.