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

1
2
3

<div id="preloader">
   <img src="preloader.gif" alt="preloader">
</div>

 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
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
2
3
4
5

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