Блог

У меня есть страница bootstrap 4 с изображением, которое может быть изменено пользователем, взаимодействующим с несколькими выпадающими списками. В зависимости от выбранных параметров источник изображения будет изменен. Изображения довольно большие, поэтому загрузка запрошенного изображения занимает некоторое время. Я бы хотел отобразить загрузочный счетчик поверх изображения во время загрузки нового изображения, чтобы пользователь знал, что его действие имело некоторый эффект.

Похоже, что встроенным загрузочным блеснам нужен свой собственный div, поэтому я подумал, что такой gif-файл может работать, если поместить его поверх изображения: https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy .webp Однако я не уверен, как разместить его поверх изображения и запустить события, необходимые для его отображения / скрытия. Поскольку мои столбцы не имеют фиксированной ширины, я хочу отобразить счетчик поверх изображения, а не заменять источник изображения на счетчик, чтобы все содержимое оставалось в правильных позициях.

Пример кода:

 <div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-auto" style="background-color:red;">
            <h2>Column 1</h2>
        </div>
        <div class="col-12 col-lg-auto" style="background-color:green;" >
            <h2 class="header-2">Column 2</h2>
            <img class="img-fluid" src="https://via.placeholder.com/500x350">
        </div>
        <div class="col-12 col-lg-auto" style="background-color:blue;">
            <h2>Column 3</h2>
        </div>
    </div>
</div>
 

Во-первых, сразу после тега добавьте это:

 <div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
 

Затем добавьте класс стиля для div изображения и в свой CSS:

 #loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}
 

Затем добавьте этот javascript на свою страницу (желательно в конце страницы, перед закрывающим </body> тегом, конечно):

  $(window).load(function() {
    $('#loading').hide();
  });
</script>
 

Наконец, отрегулируйте положение загружаемого изображения и background-color загружаемого div с помощью класса style.

Вот и все, должно работать просто отлично. Но, конечно, у вас должно быть ajax-loader.gif где-то. Халява здесь. (Щелкните правой кнопкой мыши> Сохранить изображение как …)