使用 imagesloaded.js 和 php 代碼從文件夾導入圖像

Question

我在引導模式中有下面的代碼，它允許我顯示網站上文件夾中的圖像一旦打開模式，這些圖像就會用lazyload.js加載。 當打開六個模態之一時，會出現圖像，根據圖像的大小，可能會在 1 秒后顯示一個圖像，在 5 秒后顯示一個圖像。 我想用loadedimages 更新整個東西，以便顯示一個loading.gif，這樣網站用戶就可以看到一些東西還在發生。 我不太了解如何使用 loading.gif 執行此操作。 如果您有更好的解決方案，我願意提供想法。

模態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>

這里是 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

我不太明白，因為你說的沒有庫，但有兩點：
1- 在第一個代碼塊中，您使用 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- 在第二個代碼中，有一個響應 function for.imagesLoaded named.progress 表示加載圖像時內部代碼運行。 所以你可以做你想做的事情。
例如，將此加載 div 添加到您的 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>

並將 imageloader.js 更改為：

$("#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');
  });

再次，如果它不相關，我很抱歉，因為這篇文章沒有很好地表達。