Question

I just recently noticed that when you click an image on Yahoo! Image Search it first shows a low resolution image which then gradually turns into a high resolution image.

Example:
Yahoo! Image Search

When you click the link above and click through all the images you notice that they’re always showing a low resolution image first. Why are they doing it? Does the website appear to be loading faster to the user if they’re doing it this way?

Also, could someone please point me into the direction on how this is actually done (preferably by using JQuery, in the case that they’re using JavaScript to do it)?

Answer 1

They’re using a cache of thumbnails from this URL

http://ts1.mm.bing.net/images/thumbnail.aspx?q=NUM&id=HASH

where HASH and NUM are (somehow) references to a particular thumbnail.

For example, NUM = 1148286928700 and HASH = d2f4bbf91a853cefbc18794b6eb9ecdd are a reference to this thumbnail.

Of course, thumbnails are smaller in file size than bigger images, so Yahoo! loads from a cache of thumbnails first to give the user a glimpse of what the image is, and loads the full size image in the background.

I suspect the technique they use is load the image in to a hidden img tag, and then bind to the load event of that image tag to a function which replaces the thumbnail src with the full size image src. Hence, when the (hidden) full size image is loaded, it replaces the thumbnail image we see on page load.

Let’s assume the thumbnail image is loaded in to an img tag with an ID of main_image, and our full size image is loading (in the background) in a hidden img tag with an ID of secondary_image. Then we bind to the load event of #secondary_image, and replace the src of #main_image on load:

$('#secondary_image').load(function() {
  // on big image load, replace the src of the thumbnail image
  $('#main_image').attr('src', $(this).attr('src'));
}

Then when the user wishes to view another image, we replace the src of #main_image with a different cached thumbnail, replace the src of #secondary_image with the large image, and bind the load event again (so ideally you’d create a function with the above code, and call this function whenever you changed the #secondary_image src.