动态加载时如何同步图片大小和src？

Question

我有一个函数可以通过更改文档中 IMG 标记的 src 和 css（宽度/高度）来更新图像。下面是一个简化版本的说明：

changeImage = function(src,width,height) {
  $("#changethis").attr("src",src).css("width",width+"px").css("height",height+"px");
}

<img id="changethis" />

<input type="button" onClick="changeImage('image1.jpg',100,150);" />
<input type="button" onClick="changeImage('image2.jpg',185,200);" />
<input type="button" onClick="changeImage('image3.jpg',50,100);" />

问题在于，要么 src 要么 css 将首先更改，从而产生尴尬的拉伸效果，因为图像都是不同的大小。解决这个问题的最佳方法是什么？

请注意，在进行更改之前/之后，我已经尝试隐藏/重新显示 img。没运气。希望比我聪明的人能帮忙！ :)

Answer 1

如果未缓存，则图像有加载时间。

解决办法，预加载图片：

changeImage = function(src,width,height) {
  var img = new Image();
  img.onload = function () {
     $("#changethis").attr("src",src).css("width",width+"px").css("height",height+"px");
  };
  img.src = src;
}

Answer 2

如果您更改图像的src 属性，它将始终显示原始src，直到新图像完成加载。我建议您替换整个图像元素，而不是更改 src 属性。

changeImage = function(src, width, height) {
    $("#changethis").replaceWith(
        '<img id="changethis" src="' + src + '" width="' + width + '" height="' + height + '" />'
    );
};