javascript - 交换不同大小的图像 [Javascript vs IE]

Question

我有以下简单的预加载功能，它将图像“src”属性替换为另一个图像(动画 GIF“正在加载”)。问题仅出现在 IE 中:如果“正在加载”的 GIF 小于实际图像 src，则会调整大小。例如，如果我有一个 100 像素的正方形图像并预加载它，该图像会暂时被 50x50 像素的动画 GIF 替换。当原始图像完全加载时，它不会以其大小显示，而是以较小的 50px 显示。这是代码，如果你需要的话

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

在这里你可以看到视觉错误

Answer 1

您应该能够在回调函数中调整图像的宽度/高度:

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

示例:Resizing image onLoad