Question

I have this code

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

            });
        });

Every time someone click on this button I want a image to load for like 1 sec
so the user knows that something happened..

any kind of help is appreciated

Answer 1

Something like:

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

And then

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

It will show the image for 1sec + the ajax loading time. Although, as a visitor of your site I would probably prefer to skip the 1sec delay…