在多次调整大小之前,砌体不能正确显示图像

Question

这是我在StackOverflow上的第一个问题,所以请原谅我可能做的任何失败.

我花了几天时间试图自己解决这个问题,但无济于事.我已尝试在stackoverflow和其他地方找到几个代码片段,以尝试解决问题.

我正在使用Skeleton和Masonry的组合来构建我的投资组合网站.当我最初加载投资组合时,只有1个小图像.当我第一次调整大小时,它会显示所有列但图像重叠.当我再次调整大小时,大多数瓷砖的高度都是正确的,但较长的瓷砖(JSTOR)仍然被切断.在第三次调整大小(以及所有后续访问)时,正确显示切片.

((编辑:在页面刷新(不再点击链接,但浏览器刷新)网格也变得很糟糕....有时显示所有列但有些图像堆叠,有时只显示1张小图片.))

我对JS或jQuery没有最彻底的了解,所以我的很多修复尝试都可能很笨拙.我在这一点上的假设是,在加载图像之前,砌体正在创建网格...我已经尝试了各种代码位来解决这个问题,包括Desandro自己的imageload片段以及StackOverflow上的其他响应,就像这一样.

现在我的网站应该在new.rdhalexander.com上.我不确定还需要什么其他信息....但我会密切关注这一点.

Answer 1

似乎在砌体决定获得尺寸之前图像还没有完全加载.

您可以使用一些简单的css 进行测试,您可能会看到延迟加载,

.tile {
   position:relative !important;
}

并尝试长时间的超时

setTimeout(function(){
  .. masonry blah ..
},1000);

然后为了解决时间问题,这就是砌体作者所说的.

$(window).load( function(){   $('#content').masonry(); });

链接