0

在 jQueryMobile 框架中从页面导航到新页面时，我无法理解无限滚动插件 (Paul Irish) 出了什么问题。

当页面重新加载时，一切正常，我在滚动时将下一页注入 DOM，当从弹出菜单“+摄影”导航到“社论”部分时，我得到无限滚动插件“标题到 ajax 中”加载错误的页面和正确的页面。这会导致错误并解除无限滚动到页面的绑定。

这是陷入困境的网站http://www.elisabettaclaudio.com

这是控制台日志：

["heading into ajax", Array[2] ] jquery.infinitescroll.js:183
["Using HTML via .load() method"] jquery.infinitescroll.js:183
["heading into ajax",  Array[2] ] jquery.infinitescroll.js:183
["Using HTML via .load() method"] 
XHR finished loading: "http://www.elisabettaclaudio.com/editorials/?pg=2".
["contentSelector",  <div class=​"mas masonry" style=​"position:​ relative;​ height:​ 448.79999923706055px;​ ">​…​&lt;/div>​ ] jquery.infinitescroll.js:183
XHR finished loading: "http://www.elisabettaclaudio.com/editorials/?pg=4". jquery-1.7.1.min.js:4
["Error", "end"] jquery.infinitescroll.js:183
["Binding", "unbind"]

无法找出导致此问题的原因，请记住在禁用 jqm ajax 导航时，一切都按预期工作。

这是javascript

// Remove Default section
$('.type-home').live('pagehide', function(){        
$(this).remove();
}); 

// Remove InfiniteScroll from previous section
$('.type-home').live('pagebeforehide', function(){  
$('.mas').infinitescroll('destroy');    
});     

// Bind InfiniteScroll to next section
$('.type-home').live('pagebeforeshow', function(){
$('.mas').infinitescroll('bind');
});     


$(document).bind('pageshow', function() {
    if($('.mas').length){     

      // Masonry
      var $wall = $('.mas');      

      // Ensure that images load before executing Masonry
      $wall.imagesLoaded(function(){
         $wall.masonry({
             itemSelector: '.set',
             isAnimated: false,
             animationOptions: {
                duration: 100,
                easing: 'linear',
                queue: false
              }
             }); 

        // Show itemSelector 
        var sequenza = $('.set'), i = 0;    
        (function(){
            $(sequenza[i++] || []).animate({opacity: 1}, 100, arguments.callee);
        })();   


     $wall.infinitescroll({ 
      state: {
        isDuringAjax: false,
        isInvalidPage: false,
        isDestroyed: false,
        isDone: false,
        isPaused: false,
        currPage: 1
  },
        navSelector : '.nav-selector a',  // selector for the paged navigation 
        nextSelector : '.nav-selector a',  // selector for the NEXT link (to page 2)
        itemSelector : ".set",
    contentSelector: ".mas",
        loadingImg : 'css/themes/default/images/ajax-loader.png',
        donetext : 'No more to load.',
        animate : false,
        behaviour : 'masonry-isotope',
        bufferPx : 10,
        extraScrollPx: 0,
        debug : true,
        dataType: 'html+callback',
        appendCallback: true,
        errorCallback : function() { 
         //fade out the error message after 2 seconds
         $('#infscr-loading').animate({opacity: .18}, 2000).fadeOut('slow');

        }
      },
        // call masonry as a callback.
        function(newElements) { 

        // Define new elements
        var $newElems = $(newElements);

        $($newElems).animate({opacity: 0}, 0);

        // Ensure that images load before exectuing Masonry 
        $newElems.imagesLoaded(function(){

                        // initialise Masonry for method 'appended' soon after
            $wall.masonry();

            // Use the append method will position only th new added elements
            $wall.masonry('appended', $newElems, true );

                // Fade in new elements in linear sequence
                var sequenzaNew = $newElems, i = 0; 

                (function() {
                    $(sequenzaNew[i++] || []).animate({opacity: 1}, 100,
                    arguments.callee);
                })();

            });     
        });

        // Check window height against document height and force loading
        setInterval(function(){
            var windowHeight = $(window).height();  
            var docHeight = $(document).height();   


            if(windowHeight >= docHeight){

            $wall.infinitescroll('retrieve', console.log('Force retrieve infinite scroll'));

        } else if(windowHeight < docHeight) { 

        console.log('Now wait for a scoll');    

        };
        }, 2000);


});  
};
});
4

0 回答 0