javascript - Loading Issues With Masonry

Question

I'm having a few issues with masonry, just wondering if anyone can help with any of them

1) Masonry doesn't kick in until all images are loaded and they're all stuck on the top-left of page until that's done
2) Images visibly load slowly, would love if they wouldn't display until fully loaded through some kind of pre-loader 3) The images are always positioned in a funny way on first load, but every refresh after that they are placed correctly

you can see the work in progress here, a little background, the images are meant to be loaded with random sizes, positioning and order on every load http://www.coreytegeler.com/jb/oddfuture/

Answer 1

您正在使用延迟砌体插件初始化的图像加载插件。你可以做的是：

使用 css 隐藏内容：

#container {display:none}

加载图像并应用砌体后显示图像：

var $container = $('#container');

$container.imagesLoaded( function(){

  $container.show();

  $container.masonry({
    itemSelector : '.photo'
  });

});