通过 ajax 删除图像时加载 gif 图像

Question

我有一个用户上传图片的页面。每个图像都分配有一个删除按钮。我正在尝试实现一种方法，当单击图像下方的删除按钮时，该特定的删除按钮消失并在加载 ajax 请求时加载 gif 图像，并且刷新完成后 gif 图像应该消失。 这是正在尝试的方法，但它不起作用。

$(function(){
    $('.delete-img-btn').live('click', function() {
        //asign the image id from the button attribute 'img-id'
        var id= $(this).attr('img-id');
        //The data to be send via ajax the server will recieve 2 POST variables ie. 'action' and 'id'(which is the img id)
        var data={
            'action':'/admin/image-uploader/',
                'pk':id,
           'success':refreshUploadedImages
        };

        $('.inner').empty();
        $('.inner').append('<img src="{{ MEDIA_URL }}admin/img/admin/ajax-loader.gif" id="spinner">');
        //inherit parent element (our delete button)
        $(this).ajaxStart(function() {
            $('#spinner').show();
        }).ajaxStop(function() {
            $('#spinner').hide();
        });
        $.post("/admin/image-uploader/delete/"+id ,function(data){
            refreshUploadedImages()
        });
    });
});

Answer 1

您不需要ajaxStart 和ajaxStop...在$.post 之前显示微调器并在$.post 完成后隐藏它（回调函数）。

$('.inner').empty();
$('.inner').append('<img src="{{ MEDIA_URL }}admin/img/admin/ajax-loader.gif" id="spinner">');  //show here
$.post("/admin/image-uploader/delete/"+id ,function(data){
    $('#spinner').hide();  //hide here
    refreshUploadedImages()
});