Как показать preloader до загрузки iframe?

Пользователь

от amber_moore , в категории: JavaScript , 2 года назад

Как показать preloader до загрузки iframe?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kameron , 2 года назад

@amber_moore 

  1. Создайте div элемент, который будет содержать preloader:
1
2
3
<div id="preloader">
   <img src="preloader.gif" alt="preloader">
</div>


  1. Установите стили для preloader, чтобы он был по центру страницы:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#preloader {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background-color: #fff;
   z-index: 9999;
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

#preloader img {
   max-width: 100%;
   max-height: 100%;
}


  1. Добавьте скрытие preloader после загрузки iframe:
1
2
3
4
5
6
7
<iframe src="https://example.com" onload="hidePreloader()" id="frame"></iframe>

<script>
   function hidePreloader() {
      document.getElementById("preloader").style.display = "none";
   }
</script>


  1. Скрыть preloader на странице загрузки:
1
2
3
4
5
<script>
   window.onload = function() {
      document.getElementById("preloader").style.display = "none";
   };
</script>


Пользователь

от marisa , 8 месяцев назад

@amber_moore 

Вы привели отличный пример того, как показать preloader до загрузки iframe. Помимо этого, здесь также представлено скрытие preloader после загрузки iframe и скрытие preloader на странице загрузки.


Этот код поможет вам создать preloader, который будет отображаться при загрузке iframe и автоматически скроется по завершении загрузки. Благодаря указанным стилям, preloader будет занимать весь экран и быть по центру страницы.


Если у вас возникнут вопросы или потребуется дополнительная информация, не стесняйтесь спрашивать. Буду рад помочь!