使用 imagesloaded.js 和 php 代码从文件夹导入图像

Question

I have the code below in a bootstrap modal that allows me to display the images from a folder on the website These images are loaded with lazyload.js as soon as the modal is opened. When one of the six modals is opened, the images appear and it may be that one image is displayed after 1 second and one after 5 seconds, depending on the size of the image. I want to update the whole thing with loadedimages, so that a loading.gif is displayed, so that the website user can see that something is still coming. I don't know much about how to do this with loading.gif. If you have a better solution, I'm open for ideas.

Modal 1

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  <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="container1">
                <?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>

and here the code from loadingimages

$("#container1, #container2, #container3, #container4, #container5, #container6")
  .imagesLoaded()
  .always(function (instance) {
    console.log("all images loaded");
  })
  .done(function (instance) {
    console.log("all images successfully loaded");
  })
  .fail(function () {
    console.log("all images loaded, at least one is broken");
  })
  .progress(function (instance, image) {
    var result = image.isLoaded ? "loaded" : "broken";
    console.log("image is " + result + " for " + image.img.src);
  });

Answer 1

I didn't understand much because there is none libraries you say, but there is two points:
1- in first code block, you loaded image with php. and php codes always run before any client side codes like html, css etc. so if you want to do something client side, don't do it with PHP.

2- in second codes, there is a response function for.imagesLoaded named.progress meaning the inside codes run when image is loading. so you can do wat you want in this.
for example, add this loading div to you html:

<style>
.loadingBG{
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
width: 100%;
height: 100vh;
display: none;
z-index: 100;
}.loaderGIF{
z-index: 101;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<div class="loadingBG">
<img src="loader.gif" class="loaderGIF"/>
</div>

and change imageloader.js to this:

$("#container1, #container2, #container3, #container4, #container5, #container6")
  .imagesLoaded()
  .always(function (instance) {
    console.log("all images loaded");
  })
  .done(function (instance) {
    console.log("all images successfully loaded");
    $('.loaingBG').fadeOut('slow');
  })
  .fail(function () {
    console.log("all images loaded, at least one is broken");
  })
  .progress(function (instance, image) {
    var result = image.isLoaded ? "loaded" : "broken";
    console.log("image is " + result + " for " + image.img.src);
    $('.loaingBG').fadeIn('slow');
  });

Again, I apologize if it was not relevant because the article was not well expressed.