Javascript (IE) Image Size Problem.

Chris Coleman
Chris Coleman used Ask the Experts™
on
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;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
<< 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

Author

Commented:
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 ?
leakim971Multitechnician
Top Expert 2014

Commented:
Browser cache?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

Commented:
Any proxy cache somewhere?

Author

Commented:
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.



Multitechnician
Top Expert 2014
Commented:
Try to replace : bImage.src = newBackImg;
By : bImage.src = newBackImg + "?rnd=" + (new Date().getTime());
leakim971Multitechnician
Top Expert 2014

Commented:
for testing purpose of course...

Author

Commented:
Unable to repeat problem - Although recommendation was good .

Apologies for delay.

Regards, ChrisColeman.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial