First Image not being loaded

I have the following code snippet which is called on the success of the image uploading procedure.

success(data){
      $avatar.attr('src', "/images/common/loading.gif");
      $avatar.attr('src',  data.url);
}

Here $avatar is the container for image tag. So the idea is to load this image with loading.gif until data.url is loaded successfully.Here data.url may consist large sized image which takes long time to load.
But the problem is loading.gif is never loaded in the image container until i use setTimeOut as:

success(data){
      $avatar.attr('src', "/images/common/loading.gif");
      setTimeOut(function(){
           $avatar.attr('src',  data.url);
      },100);
}

Can any one suggest me some different approach rather than to use setTimeOut.Thank you.