Detect Image Size with JavaScript

Mailbag...

Can I Make a Window Fit an Image Without Specifying the Image Size?

In my tutorial Making a Browser Window Fit an Image I showed how you can use JavaScript to open an image in its own window, exactly sized to fit the image. The code uses a hyperlink that calls a JavaScript function, and provides it with the URL of the image to be displayed, as well as its height and width in pixels. But can the same thing be achieved without knowing the size of the image?

The answer is yes - providing the images are preloaded by the browser. Here's an example:

If you click on a thumbnail the full-sized image opens in a new window sized exactly to fit the image. You can close the new window if you want to, but if you leave it open and click on another thumbnail the new image uses the same window as before, resizing it to fit the new image.

Here's the code for the JavaScript function and the code that preloads the images (it goes in the <head></head> section of the document). Note that at the end of a line indicates that the code statement continues on the next line and the entire statement should be written as a single line. This is the code that is used on the page you are currently viewing:

<script language="javascript" type="text/javascript">
//preload image files
   image_1 = new Image()
   image_1.src = "../images/qfrontpage01a.jpg"
   image_2 = new Image()
   image_2.src = "../images/qfrontpage01b.jpg"
   image_3 = new Image()
   image_3.src = "../images/qfrontpage01c.jpg"

//DetectImageSize function
   function DetectImageSize(picName,picTitle){
      picURL=picName.src
      newWindow=window.open(picURL,'newWin','toolbar=no,
         width='+picName.width+',height='+picName.height)
      newWindow.document.write('<html><head><title>'+picTitle+'
         <\/title><\/head><body background="'+picURL+'"><\/body><\/html>')
      newWindow.resizeBy(picName.width-newWindow.document.body.clientWidth,
         picName.height-newWindow.document.body.clientHeight)
      newWindow.focus()
   } 
//-->
</script>

Here's the code in the page that displays the thumbnails and calls the function:

<p align="center">
<a href="javascript:DetectImageSize(image_1,'Painted Lady')">
<img border="1" src="../images/qfrontpage01a_small.jpg" 
   alt="Painted Lady" width="75" height="83"></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:DetectImageSize(image_2,'Green-Veined White')">
<img border="1" src="../images/qfrontpage01b_small.jpg" 
   alt="Green-Veined White" width="94" height="75"></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:DetectImageSize(image_3,'Comma')">
<img border="1" src="../images/qfrontpage01c_small.jpg" 
   alt="Comma" width="107" height="75"></a></p>

The link calls the function and supplies the name of the image (as referred to in the preload code) and a title for the window. The title isn't absolutely necessary but I think it looks good! Notice that the size of the full-sized image is not specified anywhere. When the browser uses the function to display the image it detects the dimensions of the image by means of its .width and .height properties.

Why preload the images? Preloading an image means that the browser starts to download the image into the its cache as soon as the page loads. This means that it is more likely to be immediately available when the visitor asks for it to be displayed (by clicking a thumbnail). Preloading is important for this method to work properly. This is because the browser needs to know what size to make the window. If is has to wait for the image to download before it can "measure" it, it has to "guess" and makes a window of a standard (and therefore incorrect) size.

^ top

Hit Counter