Question

我在页面上的某些li元素上使用了以下插件http://www.wookmark.com/jquery-plugin。我的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
});

css <li>在chrome onload中重叠</li>

1 个答案: