Infinite Scroll with PHP array

Question

I have a PHP array with about 10,000 keys organized like this:

Array
(
    [0] => Array
        (
            [id] => 13154
            [photo_file] => 013154.jpg
        )

    [1] => Array
        (
            [id] => 7885
            [photo_file] => 007885.jpg
        )
)

And in the HTML file I have a loop that turns the array into image tags like this:

<?php
  foreach ($array as $key => $value) {
    $photo_file = $array[$key]["photo_file"];
    echo "<img src='$photo_file' />";
?>

I wanted to create an Infinite Scroll from this PHP array to avoid loading all the images at once when the page was accessed. Any idea of the best way to do this?

Maybe I could convert the PHP array to JSON and then to a Javascript variable to use Jquery?

Answer 1

You can load the entire array at once using ajax (maybe with jQuery), php (server) would return the json-encoded array, javascript would listen to the onscroll event to display the content in html.

Or you can use another approach, where php does not return the entire array at once. But instead it returns slowly, for example, 10 indices at a time. To do this, the javascript client would have to send the last accessed input to the ajax request and the server would handle the rest.