使用 jquery 更改 Src 并获得新高度

Posted 2023-03-05

【中文标题】使用 jquery 更改 Src 并获得新高度

【英文标题】：Change Src & get new height using jquery

【发布时间】：2011-03-23 13:38:00

【问题描述】：

在以这种方式使用 attr 更改 src 后，我试图在 div 中垂直居中新图像：

$("#image").attr("src",newsrc);
var height = $("#image").height();
var newmargin = (divsize - height)/2;
$("#image").css=("margin-top",newmargin);

它总是使用前一张图片的高度。这是时间问题吗？我是否需要将获取新高度绑定到某个东西以防止它过早地抓住（以前的图像）高度？

所有图片都在页面加载时预加载...

【参考方案1】：

我是否需要将获取新高度绑定到某个东西以防止它过早地抓住（以前的图像）高度？

有点。 load 事件应该可以工作。

$("#image").attr("src",newsrc);
$('#image').load(
    function() 
        var height = $("#image").height();
        // ...
    
);

http://api.jquery.com/load-event/

【讨论】：

试过了.. 仍然只能获取以前的图像高度。

有趣.. 感谢您抽出宝贵的时间来制作这个。它正在工作！除非您按下显示图像的按钮，然后按下备用图像按钮 - 它会以 chrome 形式提供先前图像的高度。 Safari 和 firefox 给出了正确的响应。也许这就是我所看到的。有趣的。例如。设置为 yahoo -> 按 1 不更改图像 -> 按 2 期望：95 结果：50

.load 并非总是在所有浏览器中触发，尤其是在图像被缓存的情况下。如果您不关心在应该缓存图像时缓存图像，一个简单的提示是向 src 添加一个随机查询字符串。 somepic.jpg?[时间戳]