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 OR 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 + '" />'
    );
};

在动态加载时我们如何同步图像大小和src？

2 个答案: