Exibir galeria sob demanda

[DinhoPHP 1]

Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.

 

loadAjax.php

$dir = new DirectoryIterator( './images/portfolio/sem_categoria' );

// array contendo os diretórios permitidos    
$diretoriosPermitidos = array("portfolio","sem_categoria");
foreach($dir as $file)
{
      // verifica se $file é diferente de '.' ou '..'
      if (!$file->isDot())
      {
         // listando somente os diretórios
         if  ( $file->isDir() )
         {
            // atribui o nome do diretório a variável
            $dirName = $file->getFilename();

            // subdiretórios
            $caminho = $file->getPathname();
            // chamada da função de recursividade
            recursivo($caminho, $dirName);
         }

         // listando somente os arquivos do diretório
         if  ( $file->isFile() )
         {
            // atribui o nome do arquivo a variável
            $fileName = $file->getFilename();
            // print
            //echo "Arquivos: ".$fileName."<br>";
         }
      }
}

function recursivo( $caminho, $dirName ){

      global $dirName;

      $DI = new DirectoryIterator( $caminho );

      foreach ($DI as $file){
         if (!$file->isDot())
         {
            if  ( $file->isFile() )
            {
                  //
                  $fileName = $file->getFilename();
                  //
                  //echo $dirName.": ".$fileName."<br>";
                  echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''>
            <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'>
            <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'>
            </a>
         </div>";
            }
         }

      }
}

Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.

<script>
        //variavel para controle de registros retornados
        var pagina = 0;
        var pesquisa = true;
        //function carrega
        function carrega(){
            $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast');
            $.ajax({
                type: "POST",
                url: "loadAjax.php",
                data: "page="+pagina,//variavel passada via post 
                cache: false,
                success: function(html){
                if(html){ 
                    $('#loading').fadeOut('fast'); 
                    $("#result").append(html); 
                    //mostra resultado na div result 
                    pesquisa = true; 
               }else{ 
                      
                    $('#loading').html("Fim da pesquisa...").fadeIn('fast'); 
                    pesquisa = false;  
               }
                },
                error:function(html){
                    $('#loading').html("erro...").fadeIn('fast');
                }
            });
        };
        //chama minha funcao ao carregar a pagina
        $(document).ready(function(){
            carrega();
        });
        //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando
        //minha function carrega novamente para trazer mais dados dinamicamente
        $(window).scroll(function(){
             
            if($(window).scrollTop() + $(window).height() >= $(document).height()){
                pagina += 1;
                carrega();
            };
        });
    </script>