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

我已经编写了以下jQuery插件，该插件用类“stretch”查找所有元素，然后使用类“stretch_this”标识子元素并将它们全部父级中最高“stretch_this”元素的高度。jQuery插件在Chrome中刷新时将图像高度降低到1px

$(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主题的一部分进行部署，如果这很重要的话。

来源

2015-10-05 BFWebAdmin

一个建议是不是一次又一次地在同一个元素上使用三个循环，您可以将三件事放在一个循环中。 – Jai

很可能，刷新时，jQuery在图像加载之前运行。 – lshettyl

@lshettyl - 我想知道是否可能是这样，但为什么它只会发生刷新？ – BFWebAdmin

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

来源

2015-10-05 08:55:32 BFWebAdmin

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

回答

相关问题