jQuery 插件在 Chrome 刷新时将图像高度降低到 1 像素

Question

我编写了以下 jQuery 插件，它查找所有带有 class "stretch" 的元素，然后识别带有 class [=22] 的子元素=] 并使它们成为父元素中最高的 "stretch_this" 元素的高度。

$(document).ready(function () {
    stretchHeight()
});

$(window).resize(function () { 
    stretchHeight()}
);

function stretchHeight() {
    $('.stretch').each(function() {
        var maxHeight = -1;
        jQuery(this).find(".stretch_this").each(function() { //Resets the height so that it can work again on a resize.
            $(this).height('auto');
        });
        jQuery(this).find(".stretch_this").each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        jQuery(this).find(".stretch_this").each(function() {
            $(this).height(maxHeight);
        });
        }
    )
}

它在页面加载时运行，并且在调整页面大小时也运行，因为我的整体布局是响应式的并且元素的高度可能会改变。

这按预期工作，除了当我在 Chrome 中刷新页面时，它会将所有以这种方式拉伸的图像高度降低到 1 像素；这不会发生在 IE 中。在 Chrome 中重新加载页面（即在地址栏中点击 return 而不是点击刷新）工作正常 - 元素按预期调整大小。

为什么会这样？是我的代码错误，还是 Chrome 的怪癖？有什么办法解决它。如果重要的话，该插件将作为 WordPress 主题的一部分进行部署。

Answer 1

lshettyl suggsted that the issue may have been that the plugin was running before the images had loaded, because the DOM was loading quicker on a refresh; this was correct. So, using the using the advice here，我把$(document).ready改成了$(window).load，插件没问题。

jQuery 插件在 Chrome 刷新时将图像高度降低到 1 像素

jQuery plugin reduces image heights to 1px on a refresh in Chrome

javascript

css

jquery

google-chrome

jquery-plugins