Для начала создадим в нужном вам файле вывод папок в которых будут находиться ваши картинки для загрузки!

 if(isset($_GET['loaded'])){

     $images_dir = array(

         'dir/1/',

         'dir/2/'

     );

 

     $img = array();

 

     foreach($images_dir as $dir){

         if(is_dir($dir)) {

             if ($h = opendir($dir)) {

                 while (($file = readdir($h)) !== false) {

                     if(preg_match("#.(jpg|jpeg|gif|png)$#i", $file)) {

                         $img[] = $dir.$file;

                     }

                 }

             }

         }

     }

     ob_end_clean();	

     $json = json_encode($img, JSON_UNESCAPED_UNICODE);

     $json = str_replace("", '', $json);

     header('Content-Type: application/json');

     echo $json;

     exit();

 }

 

После чего нужно добавить js код

 function Loaded(){

         var count = 0;

         var percent = 0;

         $.ajax({

             url: '?loaded',

             method: 'get',

             dataType: 'json',

             cache: false,

             success: function(data){

                 for(var key in data){

                     var img = new Image();

                     img.onload = function(){

                         count++;

                     }

                     img.src = data[key];

                 }

                 LoadedInterval = setInterval(function(){

                     percent = Math.round(100*(count/data.length));

                     if(percent >= 100){

                         percent = 100;

                         clearInterval(LoadedInterval);

                         setTimeout(function(){

                             $('#loaded').css("display", "none");

                             $('#content').fadeIn();

                         }, 500);

                     }

                     $('#loaded').text('Загрузка:' + percent + '%');

                 }, 50);

             }

         });

     }

     Loaded();

 

Создаём разметку

 <div id="loaded"></div>

 <div id="content" style="display:none;"></div>

 

#loaded - данный div будет отображать информацию о прогрессе загрузки
#content - данный div будет уже показывать загруженный контент