只要图像加载，功能就会激活

Question

这与我之前提到的HTML所在的问题有关：Grouping siblings into a div

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

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

var maxHeight = 0;

$('.Product img').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height()); })

$('.ProductThumbnail').css({"height":maxHeight});

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

所以，我的问题是“每当图像加载到页面上时，我怎样才能在上面列出上面的函数？”

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

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

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

Answer 1

在你的情况下你应该，或者必须使用这个功能

$('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});
    })
});