アイソトープ石工/グリッチAjaxの負荷を使用して新しいアイテムを追加しながら、

Question

は多分誰かが私の問題のためのヒントを持っているより。 私はdescribed here on GitHubと同じ問題を抱えているが、提供される解決策は、私がinfiniteajaxscrollプラグインとimagesloadedプラグインと組み合わせて、同位体石工グリッドを持っている私の場合

で働いていません。

はこれは、1つの問題を除いて正常に動作している：彼らはグリッドに適切に移動した後、まもなくしている前に、「負荷より」新しいアイテムは、ページの最上部に表示されるボタンをクリックした後（他のものの重複します）。すべてがロードされるまで隠すことは私のコードではうまくいかないようです。

は、ここで私は任意のヘルプをお願い申し上げ、私のコードスニペットです。レンダリングの前と不透明度に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); 
     }); 
    });