無限滾動遇到問題

Question

我一直在試圖讓這個無限的滾動腳本在過去的8個小時中工作，但無法弄清楚。

我在這裏上傳了網站，所以你可以看到問題：http://kevinellerton.com/meditationmagazine/article01/當你向下滾動，它應該加載article04，然後03，然後02，然後停止加載文章，因爲article01已經加載。問題是它不會停止加載它們......並且如果你在控制檯中跟蹤控制檯記錄的變量，那真是​​太不可思議了。我認爲這個問題可能與「範圍」這樣做，但我不知道:-(

請幫助，如果你能

謝謝你這麼多

$(document).ready(function() { 

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02", 
    "article01" 
]; 



// THIS WHOLE SECTION CREATES THE INFINITE SCROLL EFFECT BY ACCESSING THE ARTICLES IN ORDER. 
// IT'S NOT QUITE WORKING THOUGH. 
// IF YOU FIGURE OUT THE BUGS, YOU CAN ACTIVATE INFINITE SCROLL! 
// POST CODE ON STACKOVERFLOW... MAYBE YOU'LL GET SOME HELP! 

// get initial page name 
if (articleCounter == 0) { 
    var pathArray = window.location.pathname.split('/'); 
    var pageName = pathArray[2]; 
    console.log(pageName); 
} 

// initialize variables 
var win = $(window); 
var articleCounter = 0; 
console.log(articleCounter); 

// Each time the user scrolls 
win.scroll(function() { 
    // End of the document reached? 
    if ($(document).height() - win.height() == win.scrollTop()) { 
     $('#loading').show(); 

     // if this article is the next one in the list, skip it and go to next one 
     if (pageName == database[articleCounter]) { 
      articleCounter++; 
      var nextPage = database[articleCounter]; 
      pageName = nextPage; 
      console.log(nextPage); 
     } else { 
      var nextPage = database[articleCounter]; 
      pageName = nextPage; 
      console.log(nextPage); 
     } 

     // append nextPage to the end of the document 
     if (nextPage !== undefined) { 
      $.ajax({ 
       url: '../' + nextPage + '/index.php', 
       dataType: 'html', 
       success: function(html) { 
        $('body').append(html); 
        $('#loading').hide(); 
        articleCounter++; 
         console.log(articleCounter); 
        // POSSIBLE TO CHANGE URL PATH NAME HERE??? 
       } 
      }); 
     } 
    } 
}); 
}); 

編輯：！

我完全重寫了它，它仍然有完全相同的問題，我90％確定這個問題與SCOPE有關，但我沒有完全弄清楚它。不工作：

$（文件）。就緒（函數（）{

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02", 
    "article01" 
]; 

var articleCounter = 0; 

// get initial page name 
var pathArray = window.location.pathname.split('/'); 
var initialPage = pathArray[2]; 
alert("Initial page is " + initialPage); 

// when you scroll 
$(window).scroll(function() { 
    // if you've reached the end of the document 
    if ($(document).height() - $(window).height() == $(window).scrollTop()) { 
     $('#loading').show(); 
     // if you've reached the end of the database 
     if (articleCounter >= database.length) { 
      // load ending footer 
      alert("You've reached end of database! articleCounter is " + articleCounter); 
      // quit program 
     } 
     else if (database[articleCounter] == initialPage) { 
      articleCounter++; 
      appendArticle(); 
      articleCounter++; 
     } 
     else { 
      appendArticle(); 
      articleCounter++; 
     } 
    } 
}); 

// end scroll function 

function appendArticle() { 
    $.ajax({ 
     url: '../' + database[articleCounter] + '/index.php', 
     dataType: 'html', 
     success: function(html) { 
      $('body').append(html); 
      $('#loading').hide(); 
      // POSSIBLE TO CHANGE URL PATH NAME HERE??? 
     } 
    }); 
} 

Answer 1

你在if語句定義的變量，那也不行，我會想，說你翻頁器和計數器邏輯是確定，順便說一句，你有/* */評論幾乎所有的代碼，以便：

$(document).ready(function() { 
//you will return to page beginning if no article, so you don't have to include article1 

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02" 
]; 



// initialize variables 
var win = $(window); 
var articleCounter = 0; 
var loaded = true; 
// Each time the user scrolls 
win.scroll(function() { 
    if ($(document).height() - win.height() == win.scrollTop()) { 
     if(articleCounter == database.length){ 
      window.scrollTo(0,0); 
      return; 
     } 

     if(!loaded) return 
     $('#loading').show(); 
     loaded = false; 
      $.ajax({ 
       url: '../' + database[articleCounter] + '/index.php', 
       dataType: 'html', 
       success: function(html) { 
        $('body').append(html); 
        $('#loading').hide(); 
        articleCounter++; 
        loaded = true; 
       } 
      }); 

    } 
}); 


}); 

Answer 2

$(document).ready(function() { 

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02", 
    "article01" 
]; 

var win = $(window); 
ArticleLoad_Counter = database.length - 1;// Assuming that article01 is initialy loaded. ie, then we need to load remaing 3 articles. 
articleCounter = 0; 
var pathArray = window.location.pathname.split('/'); 
var pageName = pathArray[2]; 
console.log(pageName); 

$(window).scroll(function() { 
    if ($(win).scrollTop() + $(window).height() == $(document).height()) { 

     // Scroll bar reached at bottom 
     alert("reached bottm"); 
     if (ArticleLoad_Counter != 0) { 
      $('#loading').show(); 

      if (pageName == database[articleCounter]) { 
       articleCounter++; 
       nextPage = database[articleCounter]; 
       pageName = nextPage; 
       console.log(nextPage); 
       LoadNewArticle(nextPage); // Function for Ajax Call 

      } else { 
       nextPage = database[articleCounter]; 
       pageName = nextPage; 
       console.log(nextPage); 
       LoadNewArticle(nextPage); // Function for Ajax call 
      } 
     } 
    } 
}); 

}); 

    function LoadNewArticle(nextPage) { 
    $.ajax({ 
    url: '../' + nextPage + '/index.php', 
    dataType: 'html', 
    success: function (html) { 
     $('body').append(html); 
     $('#loading').hide(); 
     ArticleLoad_Counter--; 
     alert(nextPage); // Loaded article name 
     console.log(articleCounter); 
     // POSSIBLE TO CHANGE URL PATH NAME HERE??? 
    } 
    }); 

    } 

希望這段代碼爲您的網站的作品！