Question

我有一个代码，下面有一些工作，它有无限滚动和Imagesloaded。 Isotope存在一个已知问题images overlap由于某些浏览器中带有Wordpress响应式图像的srcset属性，但得到corrected on refresh。

我使用了fadein 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之前我首先隐藏了新元素以使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'));
  });
});
} 
})

同位素+ Imagesloaded：不工作，我应该使用窗口加载？

1 个答案: