Magnific Popup Iframe - How to show that the iframe is loading

Question

I am loading content in the magnific popup using the iframe method.

It works just fine, except that it take awhile to load the iframe content. Until the content is loaded the iframe is just a blank dark and empty popup and the user has no clue as to what is happening.

Is there a way to make the iframe show a loading message or animation until the content arrives?

The .mfp-preloader css class is of no help because it is hidden behind the iframe.

I'm thinking the best was is to somehow hide the iframe until it has content.

Thanks

Answer 1

Thanks to Dmitry who pointed me in the right direction, here is the answer that worked for me:

The callback:

callbacks: {
    beforeAppend: showIframeLoading
}

The showIframeLoading function:

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();
    });
};