使用不同尺寸的图像更改图像源，不会在 IE 中调整大小

Question

我正在尝试使用 javascript 创建一个非常简单的画廊。有缩略图，当单击它们时，大图像的源就会更新。一切工作正常，除了当我在 IE 中尝试时，图像的大小保持与初始图像的大小相同。假设初始图像为 200x200，我单击 100x100 图像的缩略图，该图像会显示，但会拉伸到 200x200。我没有设置任何宽度或高度值，所以我猜浏览器应该使用图像的正常大小，例如 FF 也是如此。

这里有一些代码：

function showBigImage(link)
{
 var source = link.getAttribute("href");
 var bigImage = document.getElementById("bigImage");
 bigImage.setAttribute("src", source);
 return false; /* prevent normal behaviour of <a> element when clicked */
}

html 看起来像这样：

<ul id="gallery">
 <li>
  <a href="images/gallery/1.jpg">
   <img src="images/gallery/1thumb.jpg">
  </a>
 </li>
    (more <li> elements ...)
</ul>

大图像是动态创建的：

function createBigImage()
{
 var bigImage = document.createElement("img");
 bigImage.setAttribute("id", "bigImage");
 bigImage.setAttribute("src", "images/gallery/1.jpg");

 var gal = document.getElementById("gallery");
 var gal_parent = gal.parentNode;
 gal_parent.insertBefore(bigImage, gal);
}

还有一些代码设置链接上的 onclick 事件，但我认为它与这种情况无关。正如我所说，问题仅出在 IE 上。提前致谢！

Answer 1

听起来 IE 在创建 #bigImage 时计算了 width 和 height 属性，然后在 src< 时不更新它们/代码> 已更改。其他浏览器可能注意到它们必须自己计算图像尺寸，因此当 src 更改时它们会重新计算它们。这两种做法都是足够合理的。

你知道showBigImage()中图像的正确尺寸吗？如果这样做，则在更改 src 时显式设置 width 和 height 属性：

function showBigImage(link) {
    var source   = link.getAttribute("href");
    var bigImage = document.getElementById("bigImage");
    bigImage.setAttribute("src",    source);
    bigImage.setAttribute("width",  the_proper_width);
    bigImage.setAttribute("height", the_proper_height);
    return false;
}

如果您不知道新尺寸，则更改showBigImage() 删除 #bigImage 并创建一个新的：

function createBigImage(src) {
    var bigImage = document.createElement("img"); 
    bigImage.setAttribute("id",  "bigImage");
    bigImage.setAttribute("src", src || "images/gallery/1.jpg");

    var gal = document.getElementById("gallery");
    gal.parentNode.insertBefore(bigImage, gal);
}

function showBigImage(link) {
    var bigImage = document.getElementById("bigImage");
    if(bigImage)
        bigImage.parentNode.removeChild(bigImage);
    createBigImage(link.getAttribute("href"););
    return false;
}