jquery - css <li> 在 chrome onload 中重叠

Question

我正在使用以下插件，http://www.wookmark.com/jquery-plugin ，在我页面上的一些 li 元素上。我的 li 元素与演示中的元素不同，从一开始就没有固定的高度。页面加载的js是:

 $(function() {
      $("#preview-grid li").wookmark({offset: 5});
 });
 $(window).resize(function() {
      $("#preview-grid li").wookmark({offset: 5});
 });

当我第一次在 Chrome 中加载页面时，我的 li 元素在每列中相互重叠(即遵守每列的宽度，但在每列内，li 元素在垂直方向上有不同程度的重叠)。但是，一旦我在加载页面后在控制台上执行 $("#preview-grid li").wookmark({offset: 5}); ， li 元素就会不重叠。

我的 li 元素最初重叠的原因是什么？考虑到我最初只在 DOM 加载后执行该行，在页面加载后重新执行该行会如何改变任何内容。

注意:这只发生在 Chrome(版本 13)中。 Firefox/Safari 按预期工作。

Answer 1

如果您的 li 包含 img 元素，则必须使用 imagesloaded plugin 。 Chrome 以这种方式处理图像。

只需将 jscript 包装在 imagesloaded 函数中即可

$('.lorem').imagesLoaded(function() {
  // do stuff after images are loaded
});