I'm a bit curious. how could we include an HTML file from jquery?

Let's assume this story;

Page 1: 

Has a link (once clicked it will execute something)

Has a div (extracted from what it read from step above)

Page 2:

Only containing some Html elements

Such as Table only.

Page 3:

Only cointaining some image elements

Showing loading Gif file.

The SOMETHING that I mentioned are these;

1) Read Page 3 content to show the loading gif into the div.

2) After couple seconds, then The loading img Fade out.

3) Read Page 2 content to show it into the div

How could I achieve this in Jquery? 

Seems I need to have a different THREAD if It's in Java language. 

But jquery seems asynchronious when I tried to put this line of code.

3. $('#supplier').click(function(event){
4.         // request form
5.         $('#middle').load('form/loading.html').fadeIn(1000);
6.         $('#middle').fadeOut(1000);
7.         $('#middle').load('form/supplier.html');
8.         event.preventDefault();
9.     });

THe result I got here is that the supplier.html is getting rendered so fast.

So then the loading.html is not even shown yet. How come?

Is there anything I forgot?