jQuery插件降低图像高度1px在Chrome浏览器上刷新

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

本文关键字：Chrome 浏览器 刷新 1px 高度 插件 图像 jQuery      更新时间：2023-09-26

我写了下面的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中，它减少了所有的图像高度以这种方式拉伸到1px;这在IE中不会发生。在Chrome中重新加载页面(即在地址栏中点击返回而不是点击刷新)效果很好-元素会按预期调整大小。

为什么会这样?这是我的代码错误，还是Chrome的怪癖?有别的办法吗?如果需要的话，这个插件是作为WordPress主题的一部分部署的。

lshettyl认为问题可能是插件在加载图像之前运行，因为刷新时DOM加载速度更快;这是正确的。所以，使用使用这里的建议，我把$(document).ready改为$(window).load，插件工作得很好。

相关文章：