Удаление экрана загрузки и счетчика после загрузки всего содержимого окна, но до завершения загрузки iframe - PullRequest
Новая
       46

Удаление экрана загрузки и счетчика после загрузки всего содержимого окна, но до завершения загрузки iframe

0 голосов
/ 05 мая 2020

Я использую экран загрузки со счетчиком, который отображается перед загрузкой всего содержимого в окне. Он хорошо работает на всех страницах, и окно загружается очень быстро на веб-страницах с меньшим количеством контента, но на одной из моих страниц я загружаю много фреймов, в которые вставляются видео YouTube. $(window).on('load', function(){}); не запускается, пока не будет загружено все содержимое, включая фреймы. Это означает, что загрузка занимает много времени, и экран загрузки со счетчиком отображается еще долго после того, как браузер завершил загрузку HTML, CSS, JS и всех изображений. Я хочу использовать загрузку скелета для окон iframe после HTML, CSS, JS и всех изображений, загруженных, чтобы сократить воспринимаемое время загрузки. Есть ли способ узнать, что остальная часть окна полностью загружена, но фреймы все еще загружаются? Вот что я сейчас делаю, чтобы удалить экран загрузки с помощью счетчика: 

<html>
<head>
</head>
<div class="spinner-wrapper">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>
<body>
 {% for video in range(videos|length) %}
   <iframe class="yvideo" src="{{ "https://www.youtube.com/embed/%s" + videos[video]}.get("url") }}"></iframe>
 {% endfor %}
 <script type=module src="{{ url_for('static', filename='js/video.js') }}"></script>
</body>
</html>

видео. js: 

$(window).on('load', function() {
    preloaderFadeOutTime = 300;
    function hidePreloader() {
    var preloader = $('.spinner-wrapper');
        preloader.fadeOut(preloaderFadeOutTime);
    }
    hidePreloader();
});

1 Ответ

0 голосов
/ 05 мая 2020

Есть несколько способов решить эту проблему:

Один простой подход может заключаться в том, чтобы изначально оставить источник iframe пустым и динамически установить источник iframe при window.load.

Вот пример код: 

 <script>
    $(window).on('load', function() {

        document.getElementById('myIframe').src = "your URL";
        document.getElementById('myIframe2').src = "your URL";

       preloaderFadeOutTime = 300;
       function hidePreloader() {
         var preloader = $('.spinner-wrapper');
         preloader.fadeOut(preloaderFadeOutTime);
       }
       hidePreloader();
    });
  </script>

  <iframe id="myIframe"  src="" ></iframe>
  <iframe id="myIframe2"  src="" ></iframe>

РЕДАКТИРОВАТЬ:
Если вы не можете изменить файл видео. js, но можете создавать свои собственные js файлы, которые могут взаимодействовать с html на странице, выполните следующие действия в ваш собственный js файл: 

//your external js
// first get collection of your iframes by class
 var listOfIframes = document.getElementsByClassName("yvideo");
 for (let item of listOfIframes) {
            item.src = "";  // set them to empty.
        }
 window.addEventListener("load", function() { 

//once page is loaded then populate the source with your json file. 


 for (let item of listOfIframes) {
            item.src = "URLs from JSON";  
        }

 });

Второй подход:

Вместо вызова hidePreloader () только в window.load. Вы также можете проверить остальные элементы на своей странице, загружены они или нет. Как только они загружены, вы можете использовать вызов hidePreloader ()

...