只要图像加载，function就会激活

这与我之前提出的HTML所在的问题有关：将兄弟姐妹分组为div

我发现很难解释我试图完成的任务，所以我画了一个快速的线框表示：

我发现了一种不同的解决方案，即对内容进行分组并获得所需的视觉效果。 图像保存在锚标记中，因此我使用jQuery在页面上找到最高的img并将该高度应用于包含标记。 因此，不是垂直对齐底部，固定高度设置为内容，而是将内容垂直对齐到顶部，最大高度设置为锚标记，并将该标记中的图像垂直对齐到底部。

var maxHeight = 0; $('.Product img').each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) $('.ProductThumbnail').css({"height":maxHeight}); 

代码完美无缺。 但是，某些类别有几个页面，当您选择“下一页”链接时，电子商务解决方案使用jQuery动态加载页面并且代码中断。

所以，我的问题是“如果图像加载到页面上，我怎么能在上面列出函数？”

[注1：]我已经尝试使用desandro加载的图像，并且它没有像我希望的那样工作。

[注2：]我还希望maxHeight匹配每一行而不是整个页面，因为TD保持在TR的范围内。

[注3：]我根本无法改变html。 我只允许为头部，自定义标题和自定义页脚添加附录。 内容是不可编辑的。

Answer 1

在你的情况下你应该，或必须使用此function

 $('img').ready(function(){ console.log('image is loaded'); }) 

它将查看元素是否已加载，然后预先形成函数…

这是一个例子

jsfiddel

Answer 2

您可以将一个委托附加到每个tr （只要子img触发ready事件时触发），重新计算该行的高度：

 $("table#tableId tr").on("ready", "img", function(){ var maxHeight = 0; $(this).find('.Product img').each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) $(this).find('.ProductThumbnail').css({"height":maxHeight}); }) }); 

ETA：此代码使用live()方法委派事件。 使用此方法，您可以将事件绑定到尚不存在的元素。 请注意，不推荐使用live() ，并且应该使用on() ，但是要使用on()进行委托，您需要一个未替换的父元素。

 $("table#tableId img").live("ready", function(){ var maxHeight = 0; var $row = $(this).parents("tr"); $row.find('img').each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) $row.find('.ProductThumbnail').css({"height":maxHeight}); }) });