Display loading image before long process

[DustyReagan]

Hi!

I have a javascript function that runs when a drop down selection is
changed. The function sorts images based on their title. Sorting can
potentially take a few seconds, so I'd like to display a loading image
before I start sorting and remove the loading image after the sort is
complete.

The problem I'm having is the screen is not being redrawn until the
sort is complete, regardless of where in the code I request to show
the loading image. So the loading image is never displayed at all.

It's as if the process is: set loading image, sort elements, remove
loading image, redraw users screen.

Any pointers?

Thanks!
Dusty

function sortby(element){

        document.getElementById('userList').className = 'hidden';
        document.getElementById('loadingImage').className = 'visible';

        var selIndex = element.selectedIndex;
        var sortby = element.options[selIndex].value;

        var images = $$('#userList a');

        if(sortby == 'Username')
                images = images.sort(sortByUsername);
        else if(sortby == 'Followers')
                images = images.sort(sortByFollowers);
        else if(sortby == 'Location')
                images = images.sort(sortByLocation);

        $('userList').adopt(images);

        document.getElementById('userList').className = 'visible';
        document.getElementById('loadingImage').className = 'hidden';
}