同位素砌體/毛刺，同時附加帶有ajax的新項目加載更多

Question

也許有人暗示我的問題。 我遇到了與GitHub此處描述的問題相同的問題，但提供的解決方案不適用於我的情況

我在與組合同位素砌體電網infiniteajaxscroll插件和imagesloaded插件。

除一個問題外，它工作正常：單擊“加載更多”按鈕后，新項目會在正確移入網格后不久出現在頁面頂部（與其他項目重疊）。 隱藏它們直到一切加載完成似乎在我的代碼中不起作用。

這是我的代碼段，我將不勝感激。 我發現的一個快速修復方法是在函數中將項目設置為在渲染之前不透明度0，在渲染之后設置為不透明度1。 但是，這也造成了另一個故障，使項目出現的空間閃爍。

$(function(){
var $container = $('.ajax-grid');
$container.isotope({
  itemSelector : '.grid-item'
});

$container.imagesLoaded().progress( function() {
$container.isotope('layout');
  });

    var ias = $.ias({
      container: ".ajax-grid",
      item: ".grid-item",
      pagination: ".ajax-pgn",
      next: ".pagination .next",
      delay: 1200
    });

    ias.on('render', function(items) {
    });

    ias.on('rendered', function(items) {
      var $newElems = $(items).hide();
      $newElems.imagesLoaded(function(){
      $newElems.fadeIn();
      $container.isotope( 'appended', $newElems );
      });
    });

    ias.extension(new IASTriggerExtension({html: 'some html',}));
    ias.extension(new IASSpinnerExtension({html: 'some html', }));
    ias.extension(new IASNoneLeftExtension({html: 'some html',}));
  });

該問題僅出現在首次點擊/加載時。 謝謝你的幫助！

Answer 1

附加項目后，可能需要對項目進行布局。 嘗試以下代碼：

ias.on('rendered', function(items) {
  var $newElems = $(items).hide();
  $newElems.imagesLoaded(function(){
  $newElems.fadeIn();
  $container.isotope( 'appended', $newElems );
 $container.isotope('layout');
  });
});

Answer 2

也許並不理想，但這暫時解決了。 我想隱藏的元素無法布局。

    ias.on('render', function(items) {
         $(items).css({ opacity: 0 });
    });

    ias.on('rendered', function(items) {
      var $newElems = $(items);
      $newElems.imagesLoaded(function(){
      $newElems.css({ opacity: 1 });
      $container.isotope( 'appended', $newElems );
      });
    });