初始化之前无法调用同位素上的方法

Cannot call methods on isotope prior to initialization

本文关键字:同位素 方法 调用 初始化      更新时间:2023-09-26

第一次加载页面时,加载OK,但在您输入(例如)第一个项目,然后返回后,它不会加载下面的所有同位素项目(大约50个项目),它会说"不再发布",这显然不是真的。

我得到这个错误:不能在初始化之前调用同位素上的方法;尝试调用"附加"

这是我正在工作的网站。

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

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

由于站点中的infinitescroll出现故障而无法工作,找不到navSelector: '.blog_infinite_scroll_button span'元素

我看到它在你的网站上给出了以下错误,它来自无限滚动插件
TypeError: Cannot read property 'debug' of undefined

同位素规范中添加项目的建议是,使用insert而不是appended

同位素-带过滤或排序的无限滚动

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

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