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 +無限滾動

回答

相關問題