我写了下面的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
,插件工作得很好。