javascript - 当这个 ajax jquery 触发器我想要一个加载 1 秒的图像

Question

我有这个代码

<script type="text/javascript">
    $(function () {
        $(".a").live("click", function () {
            var $this = $(this),
        ProductImageId = $this.data('ProductImageId');
            $.ajax({
                url: '/Home/AddToCart',
                type: "post",
                cache: false,
                data: { ProductImageId: ProductImageId },
                success: function (data) {
                    data = eval(data);
                    $this.addClass('productSelected');
                },
                error: function (result) {
                    $(".validation-summary-errors").append("<li>Error connecting to server.</li>");
                }

            });
        });

每次有人单击此按钮时，我都希望图像加载 1 秒，以便用户知道发生了什么事..

任何形式的帮助表示赞赏

Answer 1

就像是：

var $loader = $('<img src="loader.gif">').appendTo(document.body);

进而

success: function (data) {
    setTimeout(function() {
        $loader.remove();
        data = eval(data);
        $this.addClass('productSelected');
    },1000);
}

它将显示图像 1 秒 + ajax 加载时间。虽然，作为您网站的访问者，我可能更愿意跳过 1 秒的延迟......

Answer 2

在发送之前添加如下：

beforeSend: function(){
    $("some element").append("<img src='url' id='one_sec_img' />");
    SetTimeout(1000, function(){
         $("#one_sec_img").hide();

     })
 }

但是，我认为您的要求是正常的：
在这里，发送前的bcoz，只要单击触发ajax的按钮，就会加载图像，成功后可以隐藏图像。这是通常的过程，在这种情况下，不需要 setTimeout 。但是，如果您的要求是，图像应该只出现一秒，您可以使用设置超时。否则，下面的代码就足够了。

beforeSend: function(){
    $("some element").append("<img src='url' id='one_sec_img' />");

 },
success: function(res){
$("#one_sec_img").hide();

}

Answer 3

尝试：

$(".a").click( function( ) {
    $("#idOfImage").show().delay( 1000 ).hide();
    // ajax call
});

否则，如果您只希望图像仅在 ajax 调用后消失

$(".a").click( function( ) {

        $("#idOfImage").show();

        $.ajax({
            // parameters
        }).done( function( ) {

            $("#idOfImage").hide( );
        });
});

Answer 4

<script type="text/javascript">
    $(function () {
        $(".a").live("click", function () {
            var html=$(this).html();
            $(this).html('loading');//<img src="" /> 
            var $this = $(this),

        ProductImageId = $this.data('ProductImageId');
            $.ajax({
                url: '/Home/AddToCart',
                type: "post",
                cache: false,
                data: { ProductImageId: ProductImageId },
                success: function (data) {
                     $(".a").html(html);
                    data = eval(data);
                    $this.addClass('productSelected');
                },
                error: function (result) {
                    $(".validation-summary-errors").append("<li>Error connecting to server.</li>");
                }

            });
        });

试试这个。

Answer 5

使用 jQuery BlockUI 插件来显示图像，也许它可以解决你的问题。