HTML5 + jQuery +无限滚动

经过多番研究，我了解到bindingscroll事件到$(window)在live状态不支持。这很好，但对于我正在处理的脚本，我确实有一两个问题。HTML5 + jQuery +无限滚动

我有一个利用HTML5的jQuery插件史（http://tkyk.github.com/jquery-history-plugin/）在页面加载了流畅的用户体验的网站，因为我的网站有一个锚定的音其中的球员。

在我的一个页面上，我创建了一个无限滚动，在窗口滚动中加载相册。如果直接进入页面，它可以正常工作，但如果您通过支持HTML5的链接（我有一些专门用于HTML5实现的链接），那么它不起作用。

这是我的无限滚动代码：

jQuery(function() { 
       var getMoreMedias, loading, mediaType, nearBottomofPage, page, pendingCall, genreType, url, did_scroll; 
       page = 1; 
       loading = false; 
       // did_scroll = false 
       mediaType = $('.breadcrumbs strong').attr('rel'); 
       genreType = $('.breadcrumbs strong').data('genre-id') 

       nearBottomofPage = function() { 
       return $(window).scrollTop() > $(document).height() - $(window).height() - $('#footer').height(); 
       }; 

       getMoreMedias = function(page, mediaType) { 
        opts = { 
        lines: 12, //The number of lines to draw 
        length: 7, //The length of each line 
        width: 3, //The line thickness 
        radius: 10, //The radius of the inner circle 
        color: '#000', // #rgb or #rrggbb 
        speed: 1, //Rounds per second 
        trail: 60, // Afterglow percentage 
        shadow: true //Whether to render a shadow 
        }; 

        var spinner = new Spinner(opts).spin() 

        $('#loadingMore').append(spinner.el) 

        url = '/top_medias/' 
        url += mediaType 

        if(genreType) 
         url += '/' + genreType 

        url += '?page=' + page 

       $.ajax({ 
         cache: false, 
        url: url, 
        type: 'get', 
        dataType: 'script', 
        success: function(data) { 
        $('#loadingMore').html(''); 
          loading = false 
        }, 
         error: function() { 
          $('#loadingMore').html('<p>No more results could be found</p>') 
          loading = false 
         } 
       }); 
       }; 

      $(window).scroll(function(){ 
        did_scroll = true 
      }) 

      setInterval(function(){ 
       if(did_scroll) { 
        if (loading) return; 
       if (nearBottomofPage()) { 
         loading = true; 
         page++; 
         getMoreMedias(page, mediaType) 
         did_scroll = false 
       } 
       } 
      }, 250) 
     });

有什么办法把上面我所做出，如果该页面通过Ajax访问它的工作（这是HTML5的插件基本上一样）？

来源

2011-12-01 dennismonsewicz

我不确定这是否解决了您的问题，但是“浏览时运行但不是Ajax加载时运行”的声明向我提出了一个标志 - JavaScript不会在Ajax加载的页面中执行，而是您必须eval()评价Javascript。

我做什么，当我需要这个功能是添加包含JavaScript的隐藏<div>（不`”标签并执行加载后，如（伪代码）

$.ajax(url, success: function() { eval($('#ajax').html(); }); 

<div id="ajax" style="display:none"> alert('here'); </div>

来源

2011-12-01 17:49:30

呀遗憾的奇怪说法。我知道JS不会在Ajax加载的页面中执行，你必须在AjaxComplete之后运行这个功能，不过你的提示非常有帮助，谢谢!! – dennismonsewicz

你是否看到这是问题？ 'console.log'来确保脚本正在执行。 –

非常感谢Matt的帮助!!我能够让它工作！我必须做的一件事就是将'.html（）'改为'。文字（）'，但你的建议我t就像一个魅力！ – dennismonsewicz

HTML5 + jQuery +无限滚动

回答

相关问题