Question

this is my jquery code to call in ajax a representation of a switch. It works, but it takes about 20s to load, so I would like to add a loading gif to wait (while the XHR).
I don’t know how to do with the .load() method, I’ve just seen for the $.ajax() method.
If someone could explain me how to display a gif with my method, or translate my code to the $.ajax() method.

$(document).ready(function() {

        $('input:checkbox').change(function(){
        var nom = $(this).attr("value");
        if ( $(this).is(':checked') ) {
          var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value');
          $('<div id="target_' + $(this).attr('value')+ '"></div>').load(target_url).appendTo($('#target'));
        }
        else {
          $('div#target_' + $(this).attr('value')).remove();
        }
    });

Thanks,
Bye.

Answer 1

You just have to make a minor change to your code:

$('<div id="target_' + $(this).val() + '"></div>')
    .html('<img src="ressources/loading.gif" />') 
    .load(target_url)
    .appendTo('#target');

In your original code (now edited), you are creating two independent divs.