💨 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:
parent
452776939c
commit
41bcbb7157
1 changed files with 10 additions and 6 deletions
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue