Infinite scroll with button without JQuery

Themes
1

Casper theme uses excellent infinitescroll.js script written in pure javascript. Has anyone tried to rewrite it so that instead of scrolling the page for loading posts, a click on the Load More button is used. There are many jQuery solutions, but I would like to use pure JS. Maybe someone is already using some JS plugin on their blog with load more button?

1 Like
2

I have! Here’s the code. The blog parts of my theme are based on GitHub - TryGhost/Starter: A development starter theme for Ghost and modified a bit, so you might have to tweak the selectors to make it work with Casper.

1 Like
3

Your code is throwing a bunch of errors. Not sure if I understand this code and can read
Безымянный

4

The code uses relatively modern javascript which jshint is not able to fully understand. You should still be able to run the code in Chrome / Firefox (not sure about Safari) without any transpilation. If you’re targeting an older browser, you need to enable transpilation.

5

Oh yeah. Works great. thanks

6

i’ve been looking for an infinite scroll or loader to work with liebling theme but so far been striking out (even using Eduardo’s own code for liebling). I took a look at yours linked above and tried to modify the selectors, but the problem is I don’t really understand js, just enough to see where things are and make some comparisons etc. I wasn’t getting any errors when I loaded it up, but it was pausing the debugger and breaking the page (lol).

Any suggestions on what I could do to make this work for liebling?

Cheers!

7

Hey there. Vika did a good job implementing the HTTP request to receive the next page.

Basically what happens is:

  • Check if there is a next-page (using const next = activeDom.querySelector('link[rel="next"]');)
  • If yes, read the DOM - elements from the post container and append them to the currently active page

I’ve described one approach in detail here: Adding Load More button for infinite scrolling of Ghost Casper - #4 by tq-bit. It’s written in TS, but you should get the basic idea.

8

Hello. I changed the code a little, it’s a little clearer for me. I wrote in the comments about the selectors which-should-be - there are used selectors of the container of posts, the selector of the button and the selector of a separate post. Try to change the selectors to your own and embed this code in your theme.

    /************************************************************
 * Load more posts with button on front, tag & author page
 ***********************************************************/

		let nextDom = document,
		btnLoad = document.querySelector('.pagination__loadmore'), //selector of button loadmore
		postList = document.querySelector('.loop-archive__inner'); //selector of posts container

		async function loadNextPage() {
			const next = nextDom.querySelector('link[rel="next"]');
			const response = await fetch(next.href);
			nextDom = document.createRange().createContextualFragment(await response.text());

		}

		function noLoadNextPage() {
			loadNextPage().catch(() => {
        btnLoad.innerHTML = "Not posts";
        btnLoad.setAttribute("disabled", "disabled");
				if (!nextDom) {
					nextDom = document.createRange().createContextualFragment('');
					nextDom = true;
				}
			});
		}

		function toLoadMore() {
			btnLoad.addEventListener('click', () => {
				noLoadNextPage();
				for (const post of nextDom.querySelectorAll('.loop-archive > div > .loop-archive__item')) { // .loop-archive__item - selector of one post block 
					postList.appendChild(post);
				}
			});
		}
		toLoadMore();
		noLoadNextPage();
2 Likes