Magnific Popup Iframe - Как показать, что iframe загружается

Question

Я загружаю контент в полноэкранном режиме, используя метод iframe.

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

Есть ли способ сделать отображение iframe загрузочным сообщением или анимацией до тех пор, пока контент не появится?

Класс cms-preloader .mfp-preloader не помогает, поскольку он скрыт за iframe.

Я думаю, что лучшим было то, чтобы каким-то образом скрыть iframe до тех пор, пока у него не будет контента.

Благодаря

Answer 1

Благодаря Дмитрию, который указал мне в правильном направлении, вот ответ, который работал для меня:

Обратный вызов:

callbacks: { 
    beforeAppend: showIframeLoading 
} 

функция showIframeLoading:

var showIframeLoading = function() { 
    var curLength = 0; 
    var interval = setInterval(function() { 
     if ($('iframe').length !== curLength) { 
      curLength = $('.column-header').length; 
      $('.mfp-content').hide(); 
      $('.mfp-preloader').show(); 

     } 
    }, 50); 
    this.content.find('iframe').on('load', function() { 
     clearInterval(interval); 
     $('.mfp-content').show(); 
     $('.mfp-preloader').hide(); 
    }); 
}; 

Answer 2

Вы можете использовать всплывающие события для создания пользовательских действий, например:

callbacks: { 
beforeAppend: function() { 
    console.log('before iframe is added to DOM'); 
    this.content.find('iframe').on('load', function() { 
     console.log('iframe loaded'); 
    }); 
} 
}