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!
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(preViewI
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;
}
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(preViewI
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;
}
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<< sometimes >>
You need to find why. Could you confirm it's not the real image dimensions?
Did you try to resize it?
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:
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 ?
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 - 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.
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.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial