加载图像时激活该功能 [英] Function activates whenever images load

问题描述

这与我先前的HTML位置有关:将同级兄弟分组为div

This is related to my previous question where the HTML is located: Grouping siblings into a div

我发现很难解释我要完成的工作，所以我草拟了一个快速的线框表示形式:

I found it hard to explain what I was attempting to accomplish so I drew up a quick wireframe representation:

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

I found a different solution from grouping the content and getting the visual that is desired. The image is being held in an anchor tag so I used jQuery to find the tallest img on the page and apply that height to the containing a tag. So instead of vertical-align bottom with a fixed height set to the content I have vertical-aligned the content to the top with a Maximum Height set to the Anchor Tag and vertical-aligned the image in that tag to the bottom.

var maxHeight = 0;

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

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

该代码运行完美.但是，某些类别具有多个页面，当您选择下一页"链接时，电子商务解决方案将使用jQuery动态加载页面，并且代码会中断.

The code works perfectly. However, some of the categories have several pages and when you select the "Next Page" link the eCommerce solution uses jQuery to load in the page dynamically and the code breaks.

所以，我的问题是每当将图像加载到页面上时，如何在onLoad上列出上面列出的功能?"

So, my question is "How can I have the function listed above onLoad whenever images are loaded onto the page?"

[注1:]我已经尝试使用 desandro加载的图像，但此方法不起作用就像我希望的那样.

[note 1:] I have already attempted to use imagesloaded by desandro and it did not work as I had hoped it would.

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

[note 2:] I would also like the maxHeight to be matched for each row rather than the entire page, as the TD's are kept within TR's.

[注3:]我根本无法更改html.我只允许在头，自定义页眉和自定义页脚添加附录. 内容不可编辑.

[note 3:] I can not alter the html at all. I am only allowed to make addendums to the head, a custom Header, and a custom footer. The content is uneditable.

推荐答案

您可以将委托附加到每个tr(每当子img触发ready事件时将触发该委托)，以重新计算该行的高度:

You could attach a delegate to each tr (which is triggered whenever a child img fires the ready event) that recalculates that row's height:

$("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()进行委派，您需要一个不替换的父元素.

ETA: This code uses the live() method to delegate the event. With this method you can bind events to elements that do not exist yet. Note that live() is deprecated, and on() should be used, but to delegate with on() you need a parent element that is not replaced.

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

这篇关于加载图像时激活该功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！