Link to home
Avatar of Chris Coleman
Chris ColemanFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Javascript (IE) Image Size Problem.

I have a simple piece of code which downloads an image and then obtains the images width -
works perfectly in Opera and Firefox, but in IE it sometimes produces an incorrect image dimension, which is a problem because I need the image dimensions to set a div that eventually contains the image as a background.

function setGlass(imgObj, show) {

  // Translate the foreground image name into a background image name for the glass.
  var newBackImg = bigImageDirectory + imgObj.src.substr(preViewImageDirectory.length);

  var bImage = new Image();

   bImage.onload = function () {
    bImage.onload = "";

// For testing the following sometimes returns an incorrect (too big) dimension iin IE ?
alert(bImage.width);
    if (show) {
      // Set or replace the positioning imgObject.
      p = new positionGlass (true, imgObj, bImage);
    }

    // The image itself remains in the browser's cache.
    delete bImage;
  }

  bImage.src = newBackImg;
  return true;
}
Avatar of leakim971
leakim971
Flag of Guadeloupe image

<< sometimes >>

You need to find why. Could you confirm it's not the real image dimensions?
Did you try to resize it?
function setGlass(imgObj, show) {

  // Translate the foreground image name into a background image name for the glass.
  var newBackImg = bigImageDirectory + imgObj.src.substr(preViewImageDirectory.length);

  var bImage = new Image();

   bImage.onload = function () {
    this.onload = "";

this.width = "320"; //default size
this.height = (320 * this.height) / this.width;

// For testing the following sometimes returns an incorrect (too big) dimension iin IE ?
alert(this.width);
    if (show) {
      // Set or replace the positioning imgObject.
      p = new positionGlass (true, imgObj, this);
    }

    // The image itself remains in the browser's cache.
    delete bImage;
  }

  bImage.src = newBackImg;
  return true;
}
Tags:

Open in new window

Avatar of Chris Coleman

ASKER

Hi leakim971,

                    yes I did the checks and definately something was wrong, there are other images in the same
directory with the same width and they work correctly.

 However I suspected a corrupted image, well more than one actually, so i requested the producer (photoshop) of the images to send them
to me, I regenerated the web images, which is just a crop really because we need to retain some
resolution and reloaded them to the web site .. Guess what - problem is solved ..

I don't know how to explain this and why it was only a problem in IE,  a directory listing of the image definately shows the correct size and and javascript under IE reports an incorrect size ?
Browser cache?
Any proxy cache somewhere?
Browser cache - well yes maybe - I did clear it but maybe I missed something ?

However the only way it could be the browser cache is if IE uses the cache for foreground images and siomething else for background images - I strongly doubth that.

The way the script works is -

1) To get the image size download the image as JS object.
2) Create an absolutely positioned div based upon the image size, in which to display the image as a background image.

So the div size was sometimes incorrect because the downloaded image was sometimes giving incorrect dimensions - .

Firefox and Opera did not have the same problem.

Since I have regenerate the images the problem has disappeared - Will leave the problem open for a few days since others are updating the image folder and the problem could reoccur.

Thank You, Chris.



ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
for testing purpose of course...
Unable to repeat problem - Although recommendation was good .

Apologies for delay.

Regards, ChrisColeman.