jQuery изотопные перекрывающиеся элементы даже после перезагрузки или ретрансляции

Question

У меня есть функция, например functionForAjaxRequestAndDisplayData (...), которые выполняют вызов ajax и записывают/добавляют данные в html.

Когда я делаю следующее, все работает нормально;

$(document).ready(function() { 
    functionForAjaxRequestAndDisplayData(...); 
    functionForAjaxRequestAndDisplayData(...); 
    : 
    functionForAjaxRequestAndDisplayData(...); 
}); 

function functionForAjaxRequestAndDisplayData(...){ 
    : 
    $('#container').append(ajaxresponseElement);  
} 

function applyIsotop(){ 
    isotopIntialized = true; 
    $('#Feeds').imagesLoaded(function(){ 
     $('#Feeds').isotope({ 
      sortBy : 'random', 
      layoutMode: 'masonry', 
      itemSelector : '.Feed' 
     }); 
    }); 
} 

$(window).load(function(){ 
    applyIsotop(); 
}); 

Но так много запросов ajax замедляет загрузку страницы. Поскольку jQuery изотопная кладка применяется к $ (window) .load(); т.е. после нагрузки, поэтому задержка в применении мазорного вида четко видна на экране.

Чтобы решить эту проблему, я решил разделить вызовы функций ajax на 2 части следующим образом;

$(document).ready(function() { 
    functionForAjaxRequestAndDisplayData(...); 
    functionForAjaxRequestAndDisplayData(...); 
    functionForAjaxRequestAndDisplayData(...); 
    functionForAjaxRequestAndDisplayData(...); 
}); 

function loadRest(){ 
    functionForAjaxRequestAndDisplayData(...); 
    functionForAjaxRequestAndDisplayData(...); 
    : 
    functionForAjaxRequestAndDisplayData(...); 
} 

$(window).load(function(){ 
    applyIsotop(); 
    loadRest(); 
}); 

function functionForAjaxRequestAndDisplayData(...){ 
    : 
    if(isotopIntialized == false){ 
       $('#container').append(ajaxresponseElement); 
      }else{ 
       $('#container').append(ajaxresponseElement).isotope('insert',$(ajaxresponseElement),function(){ 
        $('#container').isotope('reLayout') 
       }) 
      } 
} 

Но это решение вызвало перекрытие элементов в контейнере. Если я использую «reLayout» после добавления или вставки элементов, все элементы во всех столбцах перекрываются. Если я использую «reloadItems» после добавления или вставки элементов, некоторые элементы в первых столбцах перекрываются. Однако, когда я использую изотопный фильтр, все элементы повторно выравниваются правильно.

Я попытался назвать изотопный фильтр следующим образом;

$(window).load(function(){ 
    applyIsotop(); 
    loadRest(); 
    wait(1000); 
    $('#container').isotope({ filter: '*' }); 
}); 

Но это работает слишком, потому что он выполняется, прежде чем все вызовы ajax завершены.

Answer 1

Используйте следующий код, чтобы избавиться от перекрывающего вопроса:

$container.append(divs).isotope('appended', divs, function() { 
    $container.isotope('reLayout'); 
});