在网站加载时检测图像高度

Question

我有这个响应式网格。共显示4项。我所做的是，我动态检测图像大小，并为每个图像添加填充，以便它们有足够的空间。我的代码是这样的。 （很抱歉，因为我在magento模板上应用了这个，我无法显示任何片段演示）

 var h_img = 0;
            $('.products-grid.columns4 li.item').each( function(index,items){
               var h_this = $(items).find('img').height();
               if( h_img < h_this ){
                   h_img = h_this;
               }
            });
            $('.products-grid.columns4 li.item').each( function(index,items){
                $(items).css({'min-height':h_img + 100 + 'px'});
            });
            var w_window = $(window).width();
            $(window).resize( function(){

                h_img = 0;

                $('.products-grid.columns4 li.item').each( function(index,items){
                    var h_this = $(items).find('img').height();
                    if( h_img < h_this ){
                        h_img = h_this;
                    }
                });
                $('.products-grid.columns4 li.item').each( function(index,items){
                    $(items).css({'min-height':h_img + 100 + 'px'});
                });
            });
        });

问题在于，第一次（没有缓存），JS检测到错误的图像高度，因为图像仍在加载。

仅在第二次加载（刷新）时，由于缓存而正确检测到它。但是像Chrome这样的浏览器仍然无法获取正确的高度。

重新调整大小的功能与此相关，因为所有图像都已加载且图像高度正确。

如何在加载图像时获得正确的图像高度？或者还有其他方法可以解决这个问题吗？因为如果图像高度错误，我的网格就会被打破，这就是原因。

谢谢。