Question

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

问题是当您使用清除缓存加载第一组元素时，该绝对网格中的元素位置不正确（它们重叠）。这是由同位素初始化引起的。我的（没有经验的）猜测是，当Isotope开始计算元素的未来位置时，所有新的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！

Answer 1

似乎“早晨比夜晚更聪明”（这是爱沙尼亚语中的一句话：P）。我在将新数据插入DOM的部分之后放置了一段测试代码。

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

警报类暂停了页面的加载，我意识到容器因为尚未加载的图像而缩短了很多。这意味着当我们初始化同位素时，DOM没有信息容器的高度，这就是同位素无法计算正确位置的原因。

FIX：在理解了问题后，修复非常简单，只需告诉DOM使用min-height: 122px;在CSS中的图像有多高即可。我想如果图像高度变化，那么我认为设置document.readyState == 'loaded'的间隔检查器会有所帮助。想法来自该博客http://callmenick.com/2014/06/04/check-everything-loaded-javascript/

所以我的一般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进行调查！

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

1 个答案: