How to detect if the browser is loading

Question

I am trying to show a loading image when a users click a link that will show a large image in the same page.

I was wondering what's best way to detect image loading WHILE the page has been loaded already (so window.onload() doesn't work).

Answer 1

$("img.loader").show();
$("img.big").ready(function() {
  $("img.loader").hide();
}):

Answer 2

Load the image with JavaScript and then you can use the image's onLoad attribute:

Image1 = new Image();
Image1.src = 'photo.gif';

/* Code here to display loading hour glass etc */

Image1.onload = function() {
                           /* Image has loaded here */
                        }

Answer 3

Add "onclick" event to your link, in which via setTimeout show your loading image. E.g.

<a href="...some slow loading page" onclick="setTimeout(showLoading,1)">Link Text</a>

function showLoading() {
   // Code to show "Loading..."
}