Question

I would like to know a way that it will show a pre-load.gif in #page until the page is fully loaded.
How to do this?

$('#target').click(function() {
  $('#page').html('first page load'); //will be replaced with .load
});

$('#target2').click(function() {
  $('#page').html('second page load'); //will be replaced with .load
});

Please take a look into the working example
http://jsfiddle.net/EZj4R/1/

Answer 1

jQuery Load is a shorthand for ajax, and in the docs it says it accepts a complete function.

You could preload your loading gif before calling the load

$('#target').click(function() {
  $('#page').html('<img src="loading.gif">').load('/some/url/');;
});

Check out this fiddle