1

我有一个函数，比如 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 函数调用分为以下两部分；

$(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 调用完成之前执行。

4

1 回答 1

2

使用以下代码摆脱重叠问题：

$container.append(divs).isotope('appended', divs, function () {
    $container.isotope('reLayout');
});
于 2013-12-16T09:56:55.193 回答