kinda infinite-scrolling #15
Conversation
There was a problem hiding this comment.
Hello @Shiroifuyu !
Thank's for your PR and your interest in this project !
This is a sufficient infinite scroll functionnality (missing a loading animation for example), and it should be fairly easy to remove jQuery as a dependance too !
| <script src="./renderer.js"></script> | ||
| <script> |
| @@ -1,3 +1,4 @@ | |||
| var currentURL=''; | |||
There was a problem hiding this comment.
The variable you created is not used, so you can remove it too :)
| @@ -511,6 +513,7 @@ function emptyContainer() | |||
| while (container.firstChild) | |||
| { | |||
| container.removeChild(container.firstChild); | |||
| pid = 1; | |||
There was a problem hiding this comment.
This cause a problem with the pagination : see here
There was a problem hiding this comment.
What I was trying to do was that, if you use infinite-scrolling lets say you end up on page 10 then when you select the Top section in the lateral navbar the page won't restart the pagination.
| @@ -469,6 +470,7 @@ function getResults(url) | |||
| return; | |||
| } | |||
| }) | |||
| currentURL = url; | |||
There was a problem hiding this comment.
What did you want to do here ?
|
Here is the equivalent of your jQuery code : let windowElement = window.window,
documentElement = document.documentElement;
windowElement.addEventListener('scroll', () => {
if (windowElement.scrollY >= documentElement.scrollHeight - windowElement.innerHeight - 0.1) {
showLoading();
hideLoading();
let url = getUrl(tags, imgLimit, rating);
getResults(url + `&pid=${pid}`);
pid++;
displayPid.innerHTML = `Page ${pid}`;
}
});And it works without jQuery now |
|
Thank you so much for taking the time and answering my silly mistakes, I'm still learning Javascript so I appreciate the input very much. Will try to help as much as I can with this project. |
|
No problem ! I'm glad you want to help to this project 🎉 |
Javascript isn't my strong but here are some ideas of a wanky infinite scrolling implementation.