功能啓動時加載圖片

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動態加載頁面，並且代碼中斷。

所以，我的問題是「每當圖像加載到頁面上時，如何獲得上面列出的onLoad函數？」

[注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}); 
    }) 
});