关于砌体图像加载插件的建议

Question

我在获取 Masonry 布局以正确加载图像时遇到问题，我是 javascript 的新手，希望得到一些帮助和建议。我已经尝试过 imagesLoaded 但在使其正常工作时遇到问题，主要是因为我不太确定我是否将正确的 javascript 放在正确的位置。

这是我从网站 http://imagesloaded.desandro.com/

获取的加载图像 javascript

$('#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 );
  });

我已将其保存为 masonry.js 并将其加载到 html.

在 masonry.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,

    })
});

OFten，这些库并不是真正需要的.... jQuery .on('load') 函数适用于这些情况，并且效果一样好...唯一不同之处在于，它会等到页面中的所有资源都加载完毕，而不仅仅是图像...

关于砌体图像加载插件的建议

Advice on imagesloaded plugin for masonry

html

javascript

jquery

imagesloaded

masonry