当新图像加载时jquery运行

时间:2013-06-03 04:57:33

标签: javascript jquery infinite-scroll

所以我的网站有2个容器#container#container2。我将jquery用于append内容,该内容对于一个容器具有一定的大小,而其他内容对应于另一个容器。这是代码:

$(document).ready(function() {
    $('.entry').each(function() {
        if ($(this).height() > 200) {
            $('#container2').append(this);
        }
        else {
            $('#container').append(this);
        }
    });
});

所以我的问题是,通过无限滚动和砌体,当新内容可用时,jquery不会再次运行,以便将内容附加到正确的容器。我可以添加什么,以便能够将内容附加到正确的容器中?

注意:每个容器可以有数万个图像。

更新

这是我的砌体代码:

$(window).load(function() {
    var $wall = $('#container');
    $wall.imagesLoaded(function() {
        $wall.masonry({
            itemSelector: '.entry, .entry_photo',
            isAnimated: false
        });
    });

    $wall.infinitescroll({
        navSelector: '#page-nav',
        nextSelector: '#page-nav a',
        itemSelector: '.entry, .entry_photo',
        bufferPx: 2000,
        debug: false,
        errorCallback: function() {
            $('#infscr-loading').fadeOut('normal');
        }},
    function(newElements) {
        var $newElems = $(newElements);
        $newElems.hide();
        $newElems.imagesLoaded(function() {
            $wall.masonry('appended', $newElems, {isAnimated: false}, function() {
                $newElems.fadeIn('slow');
            });
        });
    });
    $('#container').show(500);
});

所以会发生的是下一个帖子加载后,无论高度如何都加载到#container。这清楚地表明砌体工作正常,但它们只是在加载时不再调用jquery。 有没有办法确保它调用我需要的jquery?我该怎么做?

1 个答案:

答案 0 :(得分:0)

我认为您必须在masonry plugin

中添加content后初始化containers

$(document).ready(function(){
    $('.entry').each(function(){
        if($(this).height()>200){
            $('#container2').append(this);
        }
        else{
            $('#container').append(this);
        }
    });
    // masonry plugin initialization after adding content to div
});