CODEWITHSUNDEEP
javascriptinternet-explorer
Raffaele
Raffaele

Reputation: 20885

swapping images of different sizes [Javascript vs IE]

I have the following simple preloading function which substitute an image "src" attribute with another image (an animated GIF "Loading"). The problem arises only in IE: if the "loading" GIF is smaller than the actual image src, that will be resized. For example if I have a square 100px image and preload it, the image is temporarly substituted by an animated GIF of 50x50px. Whem the original image is fully loaded it is NOT displayed at its size, but at the smaller 50px. Here is the code, if you need it

_preload = function(url, placeholderUrl) {
 var img = new Image();
 loading = true;
 var placeholder = new Element("img", {
  src: placeholderUrl
 });
 img.placeholder = placeholder;
 img.onload = function(evt) {
  this.placeholder.src = this.src;
  loading = false;
 }
 img.src = url;
 return placeholder;
}

alt text Here you can see the visual error

Upvotes: 1

Views: 130

Answers (2)

subhaze
subhaze

Reputation: 8855

You should be able to adjust the width/height of the image within the callback function:

img.onload = function(evt) {
  this.placeholder.src = this.src;
  this.placeholder.width = this.width;
  this.placeholder.height = this.height;
  loading = false;
}

Example: Resizing image onLoad

Upvotes: 2

Dr.Molle
Dr.Molle

Reputation: 117334

I guess replacing placeholder with img (the img-elements inside the dom), instead of simply changing the src-attribute of placeholder, should fix this issue.

Upvotes: 0

Related Questions