permuter des images de différentes tailles [Javascript vs IE]

Question

J'ai la fonction de préchargement simple suivante qui substitue une image "src" attribut avec une autre image (un GIF "Chargement"). Le problème se pose uniquement dans IE: si le "chargement" GIF est plus petit que l'image réelle src, cela sera redimensionné. Par exemple, si j'ai une image carrée de 100 pixels et que je la précharge, l'image est temporairement remplacée par un GIF animé de 50x50 pixels. Lorsque l'image originale est entièrement chargée, elle n'est PAS affichée à sa taille, mais à la taille 50px la plus petite. Voici le code, si vous en avez besoin

_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; 
} 

Ici vous pouvez voir l'erreur visuelle

Answer 1

Vous devriez pouvoir régler la largeur/hauteur de l'image dans la fonction de rappel:

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

Exemple: Resizing image onLoad

Answer 2

Je suppose que le remplacement espace réservé avec img (les img-éléments à l'intérieur du dom), au lieu de simplement changer l'attribut src de l'espace réservé, devrait résoudre ce problème.