Question

我有一个函数绑定（在HTML中）到图像的onload=""。该函数使用jQuery的height()方法来查找图像的高度，该高度用于垂直居中。代码如下。

上下文是具有不同尺寸的图像的幻灯片，其中src=""的{{1}}随着用户选择下一图像而改变。每次源更改时都会成功调用绑定函数，但是它带有<img>的数字是旧的：在源更改之前图像的数量。换句话说：当我从第一张图片开始时，height()是正确的。当我走到第二高度时，即使它应该是不同的，高度也与之前相同。当我转到第三张图像时，高度是第二张图像的高度。等等。我知道它可以获取高度：如果我确定图像已加载，我用另一个元素height()调用此函数，它可以正常工作。

如何确保我的函数抓取的onclick信息是最新的，即现在的图像的信息？我知道这不是下载或速度的问题;我正在本地测试。

非常感谢提前！

代码：
用于图像的HTML：

height()

JS <img class="slidePhoto" id="slideImage" src="img1.jpg" onload="centerImg()" />的相关部分：

centerImg()

Answer 1

如果图像源正在通过单击按钮进行更改，您是否可以将jquery单击事件处理程序绑定到按钮以更改图像，然后拉高度而不是尝试在“onload”事件中拉高度。图片标签？ jQuery Click Event

Answer 2

我相信，因为你已经明确地在元素上设置了高度，所以当你下次要求高度时，这就是你得到的。几个选项：

（我试试这个）在DOM（var i = new Image(); i=src='...）和read the size from that（i.height）之外创建一个新图像。这应该为您提供准确的高度（尽管有必要进行一些跨浏览器测试）。
在加载功能中，您可以在测量之前尝试将高度设置为“自动”。不确定这是否有帮助。
只需创建一个新的<img>标记，然后用此替换当前标记。

其中一个应该有用。

Answer 3

您应该使用jQuery来设置加载事件。我相信这就是你要找的东西。

$('img.slidePhoto').load(function() {
    var offset = $(this).height()/2*-1;
    $(this).css({'top': '50%', 'margin-top': offset})
}

（仅供参考：应该采用$(document).ready()方式。）

请参阅jQuery documentation for the .load() method。

jQuery：绑定到image的onload的函数获取旧的height（）信息

3 个答案: