Question

我在制作砌体布局以正确加载图片方面遇到问题，我对javascript有了新的认识，并希望获得一些帮助和建议。我已经尝试过imagesLoaded，但是在让它正常工作时遇到了问题，主要是因为我不太确定我是否在正确的位置放置了正确的javascript。

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

中获取的loadedImages 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

我认为，问题是，在砌体得到calles之前，图像没有完全加载......在图像加载文件中可能是错误的...

从来没有，我不认为，你需要这个库...尝试使用以下代码创建一个新的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（＆＃39; load＆＃39;）函数适用于那些情况并且做同样的事情......唯一的区别是，等待页面中的所有资源都加载，而不仅仅是图像......

有关砌成的图像加载插件的建议

1 个答案: