Загрузка gif с lazyload - PullRequest
Новая
       7

Загрузка gif с lazyload

0 голосов
/ 31 марта 2020

Мне нужен код ниже для отображения изображений из папки на сайте. Я использую lazyload, чтобы изображения не загружались, пока пользователь не откроет модальное окно. После того, как пользователь открыл модал, возможно ли отобразить 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
  });
...