0

我有一个可以在下面工作的代码，它有无限滚动和加载图像。Isotope 存在一个已知问题，即图像由于 srcset 属性与某些浏览器中的 Wordpress 响应图像重叠，但在 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'));
  });
});
}
4

1 回答 1

0

我继续使用窗口加载首先完成资源，然后在使用 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'));
  });
});
} 
})

;

于 2016-03-19T23:30:58.647 回答