交换不同大小的图像 [Javascript vs IE]答案

【问题标题】：swapping images of different sizes [Javascript vs IE]交换不同大小的图像 [Javascript vs IE]
【发布时间】：2010-10-26 08:18:04
【问题描述】：

我有以下简单的预加载功能，它将图像“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;
}

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

【问题讨论】：

不确定，但尝试在更改 src 后在图像上强制使用 img.style.width = "auto";（以及相应的 height）

标签： javascript internet-explorer

【解决方案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

【讨论】：

这绝对解决了我的问题。不过，很奇怪你被允许做这样的事情而浏览器仍然不能自己做：P
设置宽度/高度就像设置src一样，它们都是公共属性。但是，是的，如果所有的浏览器都可以使用 JS，那就太好了。

【解决方案2】：

我猜想用 img（dom 中的 img 元素）替换 placeholder，而不是简单地更改占位符的 src 属性，应该可以解决这个问题。

【讨论】：

这也是一个解决方案，但对我来说似乎更难。 dom 中的替换 = 添加新 + 移除旧。由于我不想同时显示 2 个图像，我必须先删除（），然后添加（），但如果您在dom。