themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

💨 Infinite scroll perf improvements 

no issue
- swap jQuery HTML parsing and insertion for pure DOM
- remove fade animation
- increase buffer by 100px so next page request happens sooner
This commit is contained in:
Kevin Ansfield 2018-04-09 11:03:48 +01:00
parent 452776939c
commit 41bcbb7157
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/js/infinitescroll.js
View File

@ -4,7 +4,7 @@ $(function ($) {
var pathname = window.location.pathname; var pathname = window.location.pathname;
var $document = $(document); var $document = $(document);
var $result = $('.post-feed'); var $result = $('.post-feed');
var buffer = 100; var buffer = 300;
var ticking = false; var ticking = false;
var isLoading = false; var isLoading = false;
@ -29,7 +29,7 @@ $(function ($) {
function requestTick() { function requestTick() {
if (!ticking) { if (!ticking) {
requestAnimationFrame(infiniteScroll) requestAnimationFrame(infiniteScroll);
} }
ticking = true; ticking = true;
} }
@ -60,15 +60,19 @@ $(function ($) {
var nextPage = pathname + 'page/' + currentPage + '/'; var nextPage = pathname + 'page/' + currentPage + '/';
$.get(nextPage, function (content) { $.get(nextPage, function (content) {
$result.append($(content).find('.post').hide().fadeIn(100)); var parse = document.createRange().createContextualFragment(content);
var posts = parse.querySelectorAll('.post');
if (posts.length) {
[].forEach.call(posts, function (post) {
$result[0].appendChild(post);
});
}
}).fail(function (xhr) { }).fail(function (xhr) {
// 404 indicates we've run out of pages // 404 indicates we've run out of pages
if (xhr.status === 404) { if (xhr.status === 404) {
window.removeEventListener('scroll', onScroll, {passive: true}); window.removeEventListener('scroll', onScroll, {passive: true});
window.removeEventListener('resize', onResize); window.removeEventListener('resize', onResize);
} }
}).always(function () { }).always(function () {
lastDocumentHeight = $document.height(); lastDocumentHeight = $document.height();
isLoading = false; isLoading = false;