【问题标题】:jquery running when new images load加载新图像时运行jquery
【发布时间】:2013-06-03 14:00:07
【问题描述】:

所以我有一个包含 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 吗?我该怎么做?

【问题讨论】:

  • 所以您正在使用 masonry 插件并且想要“重新排序”新内容?
  • 我熟悉砖石,我正在使用它的无限滚动能力。但问题是当下一个帖子加载时 jquery 没有运行......有没有办法解决这个问题?

标签: javascript jquery infinite-scroll


【解决方案1】:

我认为在containers 中添加content 后,您必须初始化masonry plugin

喜欢,

$(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
});

【讨论】:

    猜你喜欢
    • 2011-05-25
    • 2014-10-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多