Javascript 从ajax加载的DOM元素（可能）没有及时准备好

我正在使用排序/过滤jQuery插件和jQuery$.ajax（）动态加载一些需要使用同位素排序的新元素到页面中。该库似乎将所有新排序的元素设置为绝对位置和固定（左、上）位置，以便执行排序

问题是，当您使用清除缓存加载第一组元素时，该绝对网格中的元素位置不正确（它们重叠）。这是由同位素初始化引起的。我（没有经验）的猜测是，当同位素开始计算元素的未来位置时，所有新的DOM元素都没有完全加载，这就是精度的来源。如果我再次执行完全相同的ajax请求，它将能够正确地计算位置

编辑#1 ajax reuqest

var $isocont = $('#page-content-result');
var isoActive = false;

$.ajax({
   url: actionUrl + 'ajax',
   type: 'POST',
   data: searchData,
   success:function (data) {              
       if(data.trim().length > 0) {             
            $('#page-content-result').hide().empty().html(data).fadeIn(600);   
            initIsotope();          
        } else {                                      
            var visible = $('#page-content-result').is(':visible');
            if(visible === true) 
            {
                $('#page-content-result').empty();                                
            }
            $('#result-notif').show();
        }
    }
});

var initIsotope = function() { 
    if(isoActive === true) {
        $isocont.isotope('destroy');
        console.log('iso stop');
        isoActive = false;
    }
    if(isoActive === false) {
        $isocont.isotope({
            getSortData: {                
                name: '.iso-docname',
            }
        });  
        console.log('iso start');
        isoActive = true;
    }
}

有人能解释一下这个问题的本质，并给出一些解决方法的提示吗？ Thnx

似乎又一次“早上比晚上聪明”（爱沙尼亚语：p）。 我在将新数据插入DOM的部分之后放置了一段测试代码

if (/complete/.test(document.readyState)) {
    alert('loaded');
}

这种警告会暂停页面的加载，我意识到由于还没有加载图像，容器会变得更短。这意味着当我们初始化同位素时，DOM不知道容器的高度，这就是同位素无法计算正确位置的原因

修复：了解问题后，修复非常简单，只需告诉DOM图像在CSS中的高度，最小高度为122px仅此而已。我想如果图像高度不同，那么我相信为

document.readyState==“loaded”

设置间隔检查器会有所帮助。 这个想法来自于那个博客

因此，我的常规js文件现在看起来像这样：

var $isocont;

$(document)(function() {
    //When DOM create a var of selector.
    $isocont = $('#page-content-result');
    //One time aka first init of Isotope with basic options.
    $isocont.isotope({
        getSortData: {                
            name: '.iso-docname',
        }
    });

    $.ajax({
       url: actionUrl,
       type: 'POST',
       data: searchData,
       success:function (data) {              
           if(data.trim().length > 0) {             
                //Set HTML data from ajax request
                $('#page-content-result').hide().empty().html(data).fadeIn(600);   
                //Reload isotope items and re-arrange the items according to config. 
                reloadIsotope();          
            } else {                                      
                //DO SMTH
            }
        }
    });
});

var reloadIsotope = function() { 
    $isocont.isotope('reloadItems');
    //We are resetting sorting since we might not want same ordering as on last result.
    $isocont.isotope({sortBy: null, sortAscending: true});  
}

---

Thanx TimSPQR用于查看

我想我们需要看一些代码，也许是数据的.ajax回调？成功：还是。完成了？当然，给你。：）嗯……看看同位素网站，我想知道在ajax请求数据之前进行一次简单的初始化是否会有所帮助。我还想知道，如果将所有同位素调用放入.done（或者在您的例子中是success）语句中，是否会允许首先完全调用数据，然后由同位素进行放置和操作。我将继续阅读…尝试进行简单初始化。页面加载后，似乎没有任何变化。此外，我还尝试在使用.html（）将数据推入DOM后添加2行。我认为

$isocont.isotype（'reloadItems'）是个好主意//加载新元素$isocont.isotype（）//重新排列新元素，否则左：0，所有元素的顶部：0

，但该测试以相同的结果结束-元素重叠。我可以尝试用其他替代库替换同位素，因为我还没有与它结婚。似乎在简单的事情上有很多麻烦。我只是觉得我犯了一些简单而明显的n00b错误，但似乎更复杂。