How can I set loading image during post data processing for jquery ajax?

问题

The jquery ajax code is:

$("#id_btnpolls").click(function(){ 
    var valCheckedRadio = $('input[name=data[distributions]]:checked').val();
    //alert(valCheckedRadio);       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        }           
    });

})

When I click the button, the data is displayed after 5 seconds or so. During that loding period I want to add a loading image. How can I do this?

回答1:

Here's the CSS + HTML I use for my loading image. I use jQuery to simply add a class that changes the opacity from 1 to 0, in combination with a CSS transition property for a fade effect. The background image for #loader is 220px X 80px and is just a solid color rounded rectangle with the text "loading" on the right hand side. The actual "ajax" spinner img is 60px tall, so that relative positioning and negative margin are there to center the img vertically.

   #loader {
        width: 220px;
        height: 80px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -1;
        opacity: 0;
        background: url(assets/images/bg-loader.png) no-repeat center center;
        transition: all .5s ease-in-out;
        margin: -40px 0 0 -110px;
    }

    #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;}

    .loading #loader {z-index: 1000; opacity: 1.0}

And the HTML (i got the loader.gif from here http://www.preloaders.net ):

    <div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/loader.gif" /></div>

And then your jQuery:

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
            $body.removeClass('loading');
        }           
    });

})

回答2:

1) Have a holding div for the image, that is normally not visible.

You can do this via css, by adding visibility:hidden; (vs visibility: visible;), or optionally with display: none;

2) In your click handler, make that holding div visible.
3) In the done callback, make it invisible again.

Directly from the docs,

var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  $("#log").html( msg );
  // hide your loading image div here
});

回答3:

Have a look at the blockUI plugin for jquery

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

回答4:

The HTML and CSS code specified by j-man86 is good. For jQuery you can use the beforeSend function in the AJAX call. beforeSend is called before an AJAX request is sent. To hide the loading image use complete function of jQuery AJAX which is called after an AJAX request has been completed. So the code will look like:

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,
        beforeSend: function(){
            $body.addClass('loading');
        },
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        },
        complete: function(){
            $body.removeClass('loading');
        }           
    });

})

来源：https://stackoverflow.com/questions/8875107/how-can-i-set-loading-image-during-post-data-processing-for-jquery-ajax

标签

javascript

jquery

ajax

post