imagesLoaded 有多个同位素容器问题答案

【问题标题】：imagesLoaded with multiple Isotope containers issueimagesLoaded 有多个同位素容器问题
【发布时间】：2014-09-16 13:53:38
【问题描述】：

我在一页中有多个同位素容器。我能够使用 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 只被挂在最后一个容器中，不知道为什么。我没有实时链接可分享，抱歉

【问题讨论】：

什么版本的同位素？
我刚刚找到解决方案，将在下面发布
所有同位素实例都应该在 imagesLoaded 中，如果您使用 v2，它是布局，而不是重新布局
当我插入新项目时，我需要在检查图像是否加载之前插入它们。也是旧版本。解决方案贴在下面。谢谢！

标签： javascript jquery jquery-isotope imagesloaded

【解决方案1】：

再一次，在写下我在 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');
                    }   

                });

【讨论】：