GIF stopped before create elements in Javascript

I'm trying to develop a little "loader" using a simple GIF image. While data is being retrieved from server, I show a loading message with its typical loading GIF.

But, when the data is successfully recieved and I try to create a simple tree (using JQuery EasyUI Treeview), the GIF is stopped until it completely build the tree.

What can I do to avoid this behaviour? Something like threads in OS (one thread to GIF image and other to tree build).

This is my source code:

// Show loading GIF
$('#loading-tree').css('display','inline');

$.ajax({
    url: 'index.php/home/getWebTree/'+ticket+'/'+username+'/'+val+'/true',
    dataType: 'json',
    success: function(data){
       createTree(data,'t开发者_高级运维t1');
       // Hide loading GIF when tree had been created
       $('#loading-tree').css('display','none');
    }
});

Thanks!

There isn't threading in Javascript. There are various methods to simulate threading in so far as to perform multiple complex computations (see: http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=javascript+threading). The best way to achieve what you want would probably be to generate the tree on the serverside and send it to the client as html and then insert that into your page. That way you won't get the disruption in the loading graphic.