Bootstrap 3 Modal：`data-remote`正在加载图像

Question

My website uses data-remote on a bootstrap modal to load images. You can see the code in this question ( https://stackoverflow.com/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!

Answer 1

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.

Answer 2

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