Isotope + Imagesloaded：不起作用，我应该使用 window 加载吗？

Question

我有一个代码可以在下面使用，它有无限滚动和图像加载。 Isotope 存在一个已知问题 images overlap due to srcset attribute with Wordpress responsive images in some browsers, but gets corrected on refresh。

我使用了淡入 jquery 动画，但它仍然不起作用（没有淡入）。在下一组帖子中，图像拍摄到顶部，然后自行纠正。

代码如下：

var fit_container = $('.fit-content');
if (fit_container.length > 0) {
 fit_container.isotope({
  layoutMode: 'fitRows',
  itemSelector: '.fit-post'
});

 fit_container.infinitescroll({
  navSelector: ".navigation",
  nextSelector: ".next-post a:first",
  itemSelector: ".fit-post",    
  pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
  bufferPx: Math.round($(window).height() * 0.9),
  loading: {
    img: js_siteurl.template_url+"/css/images/loader.gif",
    msgText: "Loading...",
    finished: undefined,
    finishedMsg: "No more posts found.",
    speed: 'slow'
  }

}, function(newElements) {
  var $newElems = $(newElements);
  console.log('finished');
  $newElems.imagesLoaded(function(){
    $newElems.fadeIn(1000);
    fit_container.isotope('appended', $newElems );
   $('#infscr-loading').detach().appendTo($('.fit-content'));
  });
});
}

Answer 1

我继续使用 window load 来首先完成资源，然后在使用 imagesLoaded 之前我先隐藏了新元素以使 fadein 工作。

$(window).load(function(){
var fit_container = $('.fit-content');
if (fit_container.length > 0) {
 fit_container.isotope({
  layoutMode: 'fitRows',
  itemSelector: '.fit-post'
});

 fit_container.infinitescroll({
  navSelector: ".navigation",
  nextSelector: ".next-post a:first",
  itemSelector: ".fit-post",    
  pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
  bufferPx: Math.round($(window).height() * 0.9),
  loading: {
    img: js_siteurl.template_url+"/css/images/loader.gif",
    msgText: "Loading...",
    finished: undefined,
    finishedMsg: "No more posts found.",
    speed: 'slow'
  }

}, function(newElements) {
  var $newElems = $(newElements);
  $newElems.hide();
  $newElems.imagesLoaded(function(){
    $newElems.fadeIn(1000);
    fit_container.isotope('appended', $newElems );
   $('#infscr-loading').detach().appendTo($('.fit-content'));
  });
});
} 
})

;

Isotope + Imagesloaded：不起作用，我应该使用 window 加载吗？

Isotope + Imagesloaded: not working, should I use window load?

wordpress

jquery

jquery-isotope

imagesloaded