0

私はこのコードを持っています

<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 秒ほどロードして、何かが起こったことをユーザーに知らせたい..

どんな種類の助けも大歓迎です

4

5 に答える 5

0

何かのようなもの：

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 秒の遅延をスキップしたいと思います...

于 2012-11-01T12:29:03.650 に答える
0

次のように送信前に追加します。

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

     })
 }

しかし、あなたの要件は普通のものだと思います:
ここでは、送信前の bcoz で、ajax をトリガーするボタンをクリックするとすぐに画像が読み込まれ、成功すると画像を非表示にすることができます。これは通常のプロセスです。この場合、setTimeout は必要ありません。ただし、要件が次のようなものである場合、画像は 1 秒だけ表示される必要があり、タイムアウトを設定できます。それ以外の場合は、以下のコードで十分です。

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

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

}
于 2012-11-01T12:29:31.997 に答える
0

試す：

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

そうでなければ、ajax呼び出しの後にのみ画像を消したい場合

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

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

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

            $("#idOfImage").hide( );
        });
});
于 2012-11-01T12:32:19.113 に答える
0 
<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>");
                }

            });
        });

これを試して。

于 2012-11-01T12:36:21.497 に答える
0

jQuery BlockUI Plugin を使用して画像を表示すると、問題が解決する場合があります。

于 2012-11-01T12:36:27.457 に答える