javascript - jQuery 插件在 Chrome 中刷新时将图像高度降低至 1px

Question

我编写了以下 jQuery 插件，它查找具有“stretch”类的所有元素，然后标识具有“stretch_this”类的子元素，并使它们全部成为父级中最高的“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 中刷新页面时，它将所有以这种方式拉伸(stretch)的图像高度减小到 1px；这在 IE 中不会发生。在 Chrome 中重新加载页面(即在地址栏中按回车而不是按刷新)效果很好 - 元素按预期调整大小。

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

Answer 1

lshettyl表明问题可能是插件在图像加载之前运行，因为刷新时 DOM 加载速度更快；这是正确的。因此，使用建议 here ，我将 $(document).ready 更改为 $(window).load，插件工作正常。