imagesloaded loading gif with php

[udisklorenz]

Hello
In the code below you can see that I display images from a folder via php on the website.
The images are displayed after they have been loaded. This looks weird on the website, because the images might be displayed after one second or after 5 seconds. Now I want to replace this with a loading gif, so the user can see that something is loading.
I saw your example with the buttons where you can add and delete pictures. Now the question is, how can I do this without the buttons, so that when the user opens the modal the images are displayed, and if they need to be loaded the loading gif is displayed?
Thanks a lot

`

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="modal-body se-pre-con">
              <!-- Project Details Go Here -->
              <h2 class="">AugenBlick</h2>
               <ul class="ul-li" id="locals">
                  <?php
                      $thumbs = glob("img/Gallery/AugenBlick/*.*");
                      $images = glob("img/Gallery/AugenBlick/*.*");
                      for ($i=1; $i<count($thumbs); $i++)
                      {
                      $numT = $thumbs[$i];
                      $numI = $images[$i];
                      echo '<li data-src="'.$numT.'"><img class="imggallery lazy" data-src="'.$numT.'" alt=""/></li>';
                      }
                  ?>
                  </ul><br>
                <!--<ul class="list-inline">
                <li>Date: January 2017</li>
                <li>Client: Threads</li>
                <li>Category: Illustration</li>
              </ul>-->
              <!--<button class="btn btn-primary" data-dismiss="modal" type="button">
                <i class="fas fa-times"></i>
                Projekt schliessen</button>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>`

[udisklorenz]

here a little explanation for the php segment:
the class "imggallery" is for the java library lightgallery and the class "lazy" is for lazyloading.
<ul class="ul-li" id="locals"> there you can see that i tried it before with your example "locals" but it doesn't work for me

[udisklorenz]

and here you can find the website where it should work ;)
http://riederhslu.bplaced.net/arart/

[udisklorenz]

@desandro have you found something?