0

1 ページに複数のアイソトープ コンテナがあります。各コンテナにajaxを使用して新しいアイテムをロードできますが、imagesLoadedプラグインを使用して画像がロードされた後にアイテムを再レイアウトしようとすると、最後のコンテナでのみ機能します。

私のコードは、ajax でアイテムを取得すると次のようになります。

//Get all the items                     
var $new_items = $($items).filter('.post-grid-item'),
    slugs = {};

// check items and save slugs (containers ids)
$new_items.each(function(){
    var sl =$(this).attr('data-slug');
    slugs[sl] = '';
});
// loop for each unique id                
for (var new_slug in slugs) {

    // I insert the items into the isotope container    
    $('.posts-grid.'+new_slug).isotope('insert', $new_items.filter('[data-slug='+ new_slug +']') );
    // I attached imagesloaded event to container to relayout once images are loaded
    $('.posts-grid.'+new_slug).imagesLoaded( function() {                       
            // Only runs on last container id  - why?¿?¿
            $('.posts-grid.'+new_slug).isotope('reLayout');
            $('.posts-grid.'+new_slug).isotope('reloadItems');

    });                         

}

imagesLoaded は最後のコンテナーにのみフックされるようですが、理由はわかりません。共有するライブ リンクがありません。申し訳ありません

4

1 に答える 1

0

もう一度、私が直面している問題を Stackoverflow に書き留めて、別の視点から見ると、解決策を見つけることができました。

複数の画像が読み込まれたインスタンスを呼び出す代わりに、すべてのアイソトープ コンテナーのすべての画像が読み込まれた後に一度だけ呼び出します。基本的に、次のように移動しました。

                //Get all the items 
                var $new_items = $($items).filter('.post-grid-item'),
                    slugs = {};
                // check items and save slugs (containers ids)
                $new_items.each(function(){
                    var sl =$(this).attr('data-slug');
                   slugs[sl] = '';
                });

                // loop for each unique id 
                for (var new_slug in slugs) {
                    // I insert the items into the isotope container            
                    $('.posts-grid.'+new_slug).isotope('insert', $new_items.filter('[data-slug='+ new_slug +']') );

                }
                // All images in all isotopes containers are loaded
                $('.container.section-content').imagesLoaded( function() {                      
                    //loop again in container and relayout
                    for (var new_slug in slugs) {
                        $('.posts-grid.'+new_slug).isotope('reLayout');
                        $('.posts-grid.'+new_slug).isotope('reloadItems');
                    }   

                });
于 2014-09-16T14:07:19.140 に答える