@amber_moore
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> |
@amber_moore
Вы привели отличный пример того, как показать preloader до загрузки iframe. Помимо этого, здесь также представлено скрытие preloader после загрузки iframe и скрытие preloader на странице загрузки.
Этот код поможет вам создать preloader, который будет отображаться при загрузке iframe и автоматически скроется по завершении загрузки. Благодаря указанным стилям, preloader будет занимать весь экран и быть по центру страницы.
Если у вас возникнут вопросы или потребуется дополнительная информация, не стесняйтесь спрашивать. Буду рад помочь!