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

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

от amber_moore , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

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

@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>