Show loading GIF image while client-side scripts are executing

I got really heavy jQuery code. Everything is preloaded to the client and then sorted with jQuery:

$('.acc_trigger').hide();
$('#taxonomylist ul li').each(function() {
    $href = $("a"开发者_如何学Python, this).attr("href");
    if (!$href.match(/^.*\/activity\/.*[a-z,A-Z]$/i)) {
        $(this).hide();
    }
});
$('#taxonomylist ul li a').click(function() {
    $href = $(this).attr("href");
    $('.acc_trigger').hide();
    $regex = new RegExp("^" + $href + "+$");

    $('div.taxonomy ul li').each(function() {
        $href_taxonomy = $("a", this).attr("href");
        if ($href_taxonomy == $href) {
            $(this).parents().filter('.views-field-webform-form-body').prev().show();
        }
    });

    $('#taxonomylist ul li').each(function() {
        $href_sub = $("a", this).attr("href");
        if (!$href_sub.match($regex)) {
            $(this).show();
        }
    });

    return false;
});

How do I show loading image when my JavaScript code is working? Or maybe you see something that can be improved in my code?

The JavaScript execution, page rendering, and painting pipeline in browsers are single threaded (unless you count HTML5 webworkers). This means, that if you run JavaScript that is CPU intensive enough, animated GIF images will stop animating. The only way around that is to optimize your code, and in some cases break the execution callstack with setTimeouts.

Without knowing what this jQuery is operating on, it's hard to suggest any improvements.

However, I have used loading icons in the past by putting them as a background image on whatever you're loading all the data into, that way when the data gets loaded it covers them up.

Just show a loading image before starting your jQuery work and hide it after it has finished.

I don't think that there is an event like when using Ajax.