check for image size

Forum Moderators: open

Message Too Old, No Replies

check for image size

I am trying to validate an image before it loads to an image swap

lonex00

6:09 pm on Jun 5, 2004 (gmt 0)

I am using some mouse overs on my site to swap an image to the coorisponding link. The p[roblem that I am having is that the images are loaded dynamically and unfortunately, if the image doesn't exist, I get an image that is 1x1 pixel. The image swap behavior becomes really jumpy as tables resize and stuff. I also preload all the images first. What I would like to do, is on the mouseover, check the image object height and width properties and see if they are 1x1 pixel. If so, use the alternate image on the image swap instead (no_image_available.jpg). Can someone help me out with the function that is capable of doing this? Thanks

Bernard Marx

7:29 pm on Jun 5, 2004 (gmt 0)

This does the trick in IE.

I can't get anything to work in Netscape.

[blue]onerror[/blue]

fires, but I can't change the image

[blue]src[/blue]

.
Tried

[blue]onload[/blue]

, but that doesn't fire at all.

Where's Tribble when you need him?

Bernard Marx

1:12 am on Jun 6, 2004 (gmt 0)

I don't know whether this is a cheeky hack, or just plain sensible.
It does appear to work though.

<html>
<head>
<title>image preloader, with load failure default & onclick demo</title>
<script>
[red]//........ params............[/red]
var imageDir  = "images/"var roll_images =
{
  not_found:"image_not_found.jpg",
  [red]// above: default image path. must be first[/red]
  apple : "orchard.jpg",
  orange : "bears_like_marmalade.jpg",
  banana : "idontexist.jpg" [red]// no comma[/red]
}
[red]//............................[/red]
preload(roll_images,imageDir)
[red]//........functions...........[/red]
function preload(images, path)
{
  [red]// swap src strings for images objects
  // assign onerror event method[/red]
  var tempSrc;
  var image;
  for(var key in images)
  {
    tempSrc = images[key]
    image = images[key] = new Image()
    image.onerror = regError
    image.key   = key
    image.src   = path + tempSrc
  }
  [red]// 'inner function'[/red]
  [red]// if error, swap for default image[/red]
  function regError()
  {
    if(this!= images['not_found']) [red]// no default for default![/red]
      images[this.key] = images['not_found']
    else
      images['not_found'] = null
  }
}
function roll(key, targetId)
{
  var image = roll_images[key]
  if(!image) return false [red]// check for bad default[/red]
  var target = document.images[targetId]
  target.src = image.src
}
</script>
</head>
<body>
  <a href="javascript:roll('apple', 'display');void 0">Link 0</a>
  <a href="javascript:roll('orange','display');void 0">Link 1</a>
  <a href="javascript:roll('banana','display');void 0">Link 2</a>
  <br /><br />
  <img src="images/spacer.gif" id="display" width="200px" height="425px" /></body>
</html>

lonex00

2:23 am on Jun 6, 2004 (gmt 0)

Thanks guys,
I found the solution and can't believe how simple it actually was. I included this in the onload event of the img tag
onload="if(this.width=='1') this.src='no_image.gif'"

Rambo Tribble

2:44 am on Jun 6, 2004 (gmt 0)

That's the trouble with Tribbles. Never where you want when you want. I thought I saw him here a minute ago, though . . . Oh! Oh! Wait!

Apparently I'm getting different results than you, Bernard, because the first code you posted works fine for me on Mozilla 1.5. The onerror just causes the default image to load. Even did in NS 4.79, though it mangled the width, for some reason.

I'd be careful, lonex00, not all browsers support onload for images. It is only standardized for the body and, to a degree, for frames, for which it depends on the (X)HTML version (usually found in the transitional, not strict spec).

Rambo Tribble

4:06 am on Jun 6, 2004 (gmt 0)

A far more shameless (but simpler) hack than Mr. Marx's is to style the image with the appropriate dimensions and use the default image as the value of the background URL. You'll get variable results depending on the browser, but combined with the onerror technique, perhaps you can satisfy the preponderance of browsers.

I should add that Opera 7.23 works with both the onerror and background techniques, Moz 1.5 only with the onerror, and IE 6 works with both, but has the red x over the default image with just the background.