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()
});

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

1 个答案: