diff --git a/assets/js/infinitescroll.js b/assets/js/infinitescroll.js index 6da63cf..c5b21f6 100644 --- a/assets/js/infinitescroll.js +++ b/assets/js/infinitescroll.js @@ -1,29 +1,78 @@ // Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll $(function ($) { - var currentPage = 1, - pathname = window.location.pathname, - $window = $(window), - $document = $(document), - $result = $('.post-feed'); + var currentPage = 1; + var pathname = window.location.pathname; + var $document = $(document); + var $result = $('.post-feed'); + var buffer = 100; - function handleScroll () { - // return if not scroll to the bottom - if ($window.scrollTop() + $window.height() !== $document.height()) { + var ticking = false; + var isLoading = false; + + var lastScrollY = window.scrollY; + var lastWindowHeight = window.innerHeight; + var lastDocumentHeight = $document.height(); + + // remove hash params from pathname + pathname = pathname.replace(/#(.*)$/g, '').replace('/\//g', '/'); + + function onScroll() { + lastScrollY = window.scrollY; + requestTick(); + } + + function onResize() { + lastWindowHeight = window.innerHeight; + lastDocumentHeight = $document.height(); + requestTick(); + } + + function requestTick() { + if (!ticking) { + requestAnimationFrame(infiniteScroll) + } + ticking = true; + } + + function infiniteScroll () { + // return if already loading + if (isLoading) { return; } - if (currentPage >= maxPages) { - return $window.off('scroll', handleScroll); + // return if not scroll to the bottom + if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) { + ticking = false; + return; } + isLoading = true; + // next page currentPage++; // Load more - $.get((pathname + 'page/' + currentPage + '/'), function (content) { + var nextPage = pathname + 'page/' + currentPage + '/'; + + $.get(nextPage, function (content) { $result.append($(content).find('.post').hide().fadeIn(100)); + + }).fail(function (xhr) { + // 404 indicates we've run out of pages + if (xhr.status === 404) { + window.removeEventListener('scroll', onScroll, {passive: true}); + window.removeEventListener('resize', onResize); + } + + }).always(function () { + lastDocumentHeight = $document.height(); + isLoading = false; + ticking = false; }); } - $window.on('scroll', handleScroll).trigger('scroll'); + window.addEventListener('scroll', onScroll, {passive: true}); + window.addEventListener('resize', onResize); + + infiniteScroll(); });