同位素+图像加载:不起作用，我应该使用窗口加载

Question

我有一个代码可以在下面工作，它有无限滚动和图像加载。Isotope有一个已知的问题，即由于srcset属性，图像在某些浏览器中与Wordpress响应式图像重叠，但在刷新时得到纠正。

我使用了淡入 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

我继续使用窗口加载首先完成资源，然后在使用 imagesLoaded 之前，我首先隐藏了新元素以使淡入工作。

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

;