javascript - 无法在初始化之前调用同位素方法

Question

我第一次加载页面时，加载正常，但是当您输入第一个项目后，然后返回，它不会加载下面的所有同位素项目(大约 50 个项目)，并且显示“不”更多帖子”这显然是不正确的。

我收到此错误:无法在初始化之前调用同位素方法；尝试调用“附加”

这是site我正在努力。

知道问题出在哪里吗？这是我的代码:

    function initBlog(){
        "use strict";

        if($j('.blog_holder.masonry').length){
            var width_blog = $j(this).closest('.container_inner').width();
            if($j('.blog_holder.masonry').closest(".column_inner").length) {
                width_blog = $j('.blog_holder.masonry').closest(".column_inner").width();
            }
            $j('.blog_holder.masonry').width(width_blog);
            var $container = $j('.blog_holder.masonry');
            var $cols = 3;

            if($container.width() < 420) {
                $cols = 1;
            } else if($container.width() <= 805) {
                $cols = 2;
            }

            $container.isotope({
                itemSelector: 'article',
                resizable: false,
                masonry: { columnWidth: $j('.blog_holder.masonry').width() / $cols }
            });
            $j('.filter').click(function(){
                var selector = $j(this).attr('data-filter');
                $container.isotope({ filter: selector });
                return false;
             });
            if( $container.hasClass('masonry_infinite_scroll')){
                $container.infinitescroll({
                    navSelector  : '.blog_infinite_scroll_button span', 
                    nextSelector : '.blog_infinite_scroll_button span a',
                    itemSelector : 'article',
                    loading: {
                        finishedMsg: finished_text,
                        msgText  : loading_text
                      }
                    },
                    // call Isotope as a callback
                    function( newElements ) {
                      $container.isotope( 'appended', $j( newElements ) );
                      fitVideo();
                      fitAudio();
                      initFlexSlider();
                        setTimeout(function(){
                            $j('.blog_holder.masonry').isotope( 'layout');
                        },400);
                    }
                );
            }else if($container.hasClass('masonry_load_more')){


                var i = 1;
                $j('.blog_load_more_button a').on('click', function(e)  {
                    e.preventDefault();

                    var load_more_holder = $j('.blog_load_more_button');
                    var load_more_loading = $j('.blog_load_more_button_loading');
                    load_more_holder.hide();
                    load_more_loading.show();

                    var link = $j(this).attr('href');
                    var $content = '.masonry_load_more';
                    var $anchor = '.blog_load_more_button a';
                    var $next_href = $j($anchor).attr('href');
                    $j.get(link+'', function(data){
                        var $new_content = $j($content, data).wrapInner('').html();
                        $next_href = $j($anchor, data).attr('href');
                        $container.append( $j( $new_content) ).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
                        fitVideo();
                        fitAudio();
                        initFlexSlider();
                        setTimeout(function(){
                            $j('.blog_holder.masonry').isotope( 'layout');
                        },400);

                        load_more_holder.show();
                        load_more_loading.hide();

                        if($j('.blog_load_more_button span').attr('rel') > i) {
                            $j('.blog_load_more_button a').attr('href', $next_href); // Change the next URL
                        } else {
                            $j('.blog_load_more_button').remove();
                        }
                    });
                    i++;
                });

            }
            $j(window).resize(function(){
                if($container.width() < 420) {
                    $cols = 1;
                } else if($container.width() <= 785) {
                    $cols = 2;
                } else {
                    $cols = 3;
                }
            });

        $j('.blog_holder.masonry').animate({opacity: "1"}, 500);
        }   
    }

Answer 1

由于网站中的 infinitescroll 失败，它无法工作，找不到 navSelector: '.blog_infinite_scroll_button span' 元素

我发现您的网站出现以下错误，该错误来自无限滚动插件。
类型错误:无法读取未定义的属性“调试”

<强> Recommendation from isotope specs for Adding Items是，使用 insert 而不是 append

isotope - Infinite Scroll with filtering or sorting

我建议不要使用带有过滤或排序的无限滚动。这种组合会产生不必要的复杂用户交互，这会让您的用户感到沮丧。添加新内容，但其中一部分可能会被隐藏。当无限滚动添加更多内容时，用户无法知道哪些内容被隐藏或重新排列。对同位素实现进行适度控制。

如果您确实计划通过过滤或排序来实现无限滚动(这是一个坏主意)，请使用 insert 方法而不是 append。