0

I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.

For this post I simply load some text instead of image. I can write the code for it's equivalent.

So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).

But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.

And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.

Please help. Thanks!

Diana J.
  • 13
  • 1
user11067275
  • 99
  • 1
  • 8

1 Answers1

2

What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.

Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.

Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.

An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin

Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).

Hope this helps.

jordan
  • 116
  • 4