关于imagesloaded插件的建议

Question

我有问题得到砌体的布局正确加载图像，我是相当新的javascript，并感谢一些帮助和建议。我已经尝试过imagesLoaded，但我有一个问题，让它正确工作，主要是因为我不太确定，我把正确的javascript在正确的地方。

这是我的loaddimages javascript取自网站http://imagesloaded.desandro.com/

$('#container').imagesLoaded( function() {
});
$('#container').imagesLoaded( {
  },
function() {
}
);
$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

我已将其保存为masony .js并将其加载到html中。

在mason .pkgd.min.js中我写了:

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true,
})

砌体工程，但当我刷新页面布局中断。如果我调整浏览器，它会自动修复。下面是网站为您展示正在发生的事情:http://www.elraymond.com/

再一次，任何正确的建议或指针将非常感谢。

谢谢

Answer 1

我认为，问题是，图像没有完全加载，之前砌体得到调用…也许这是错误的图像加载文件…

尽管如此，我不认为你需要这个库来做……尝试用以下代码创建一个新的js文件，并将其包含在砌体文件 之后

$(window).on('load', function(){
    $('.grid').masonry({
      // set itemSelector so .grid-sizer is not used in layout
      itemSelector: '.grid-item',
      // use element for option
      columnWidth: '.grid-sizer',
      percentPosition: true,
    })
});

通常，这些库并不是真的需要....jQuery的.on('load')函数就是针对这些情况的，它的效果和以前一样好……唯一的区别是，它等待，直到所有的资源从页面加载，而不仅仅是图像…