images 여러 동위 원소 컨테이너로로드 됨

Question

한 페이지에 여러 개의 동위 원소 컨테이너가 있습니다. Im은 각 컨테이너에 아약스가있는 새 항목을로드 할 수 있지만 imagesLoaded 플러그인을 사용하여 이미지를로드 한 후에 항목을 다시 레이아웃하려고하면 마지막 컨테이너에서만 작동합니다.

//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 만, 확실하지 왜 마지막 용기에 미혹 것으로 보인다 :

내 코드는 내가 아약스에 의해 항목을 일단 내가 할 다음이다. 공유 할 수있는 라이브 링크가 없습니다. 미안합니다.

Answer 1

다시 한 번, 문제가되는 Im를 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'); 
        } 

       });