Php 在引导模式框中加载远程数据之前添加等待消息

我有以下代码用于将远程php数据加载到引导模式框中：

$(function() {
    $(window).bind("resize", function() {
        if ($(this).width() < 400) {
            $('#tabs-content').removeClass('col-xs-10').addClass('col-xs-12')
        } else {
            $('#tabs-content').removeClass('col-xs-12').addClass('col-xs-10')
        }
    }).resize();
});
$(function() {  
    $(document).on('click', '.push', function(e) {
        e.preventDefault();
        var id = $(this).attr('id'); 
        $.ajax({
            type: 'post',
            url: 'details.php', // in here you should put your query 
            data: {
                'bookid': id,
                'lang': 'fa',
                'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
            }, 
            success: function(r) {
                // now you can show output in your modal 
                $('#bookdetails').modal({
                        backdrop: 'static',
                        keyboard: false
                    }) // put your modal id 
                $('.something').show().html(r);
            }
        }); 
    });
});

$（函数（）{
$（窗口）。绑定（“调整大小”，函数（）{
if（$（this）.width（）<400）{
$（“#制表符内容”）.removeClass（'col-xs-10'）.addClass（'col-xs-12'））
}否则{
$（“#制表符内容”）.removeClass（'col-xs-12'）.addClass（'col-xs-10'））
}
}).resize（）；
});
$（函数（）{
$（文档）.on（'click'，'push'，函数（e）{
e、 预防默认值（）；
var id=$（this.attr（'id'）；
$.ajax({
键入：“post”，
url:'details.php'，//您应该将查询放在这里
数据：{
'bookid'：id，
"郎":"法",，
“csrf_令牌”：“MTQ0OTQxNdQ0MUVN2JWnxNjRhVxMdzMoxFPQM1RONFNtk1Uz3LPMGZO”
}, 
成功：功能（r）{
//现在，您可以在模式中显示输出
$（“#书籍详细信息”）.modal({
背景：“静态”，
键盘：错误
})//输入您的模态id
$（'.something'）.show（）.html（r）；
}
}); 
});
});

这对我有效，但我需要在加载数据之前显示加载

消息/图像

如何添加等待消息/图标
 您只需在
Ajax调用之前显示
image/message
，并将其隐藏在
success:function（r）

假设在模式加载之前您有要显示的图像，例如图像HTML

<img class="progress" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" style="display:none;">


$(document).on('click', '.push', function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    $(".progress").show(); // <-- Show progress image
    $.ajax({
        type: 'post',
        url: 'details.php', // in here you should put your query 
        data: {
            'bookid': id,
            'lang': 'fa',
            'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
        }, 
        success: function(r) {
            // now you can show output in your modal 
            $('#bookdetails').modal({
                    backdrop: 'static',
                    keyboard: false
                }) // put your modal id 
            $('.something').show().html(r);
            $(".progress").hide(); // <-- Hide progress image
        }
    });
});