javascript - 使用延迟加载加载 gif

Question

我需要下面的代码来显示网站上文件夹中的图像。我使用延迟加载来确保在用户打开模式之前不会加载图像。用户打开模式后，是否可以在加载所有图像之前显示 loading.gif？我已经将lazyload的延迟设置为2秒，但是如果用户打开模态并且2秒没有出现任何东西，它看起来并不好。

谢谢

<!-- 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">
                  <!-- Project Details Go Here -->
                  <h2 class="">AugenBlick</h2>
                   <ul class="ul-li">
                      <?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>

这里是我的延迟加载设置

/*Lazyload*/
  var lazyLoadInstance = new LazyLoad({
  elements_selector: ".lazy",
  load_delay: 2000
  });

标签： javascripthtmlcssbootstrap-4lazy-loading