Magnific Popup Iframe - 如何显示 iframe 正在加载答案

【问题标题】：Magnific Popup Iframe - How to show that the iframe is loadingMagnific Popup Iframe - 如何显示 iframe 正在加载
【发布时间】：2014-01-21 13:23:14
【问题描述】：

我正在使用 iframe 方法在放大的弹出窗口中加载内容。

它工作得很好，只是加载 iframe 内容需要一些时间。在加载内容之前，iframe 只是一个空白的黑暗和空的弹出窗口，用户不知道发生了什么。

有没有办法让 iframe 显示加载消息或动画，直到内容到达？

.mfp-preloader css 类没有任何帮助，因为它隐藏在 iframe 后面。

我认为最好的办法是以某种方式隐藏 iframe，直到它有内容为止。

谢谢

【问题讨论】：

标签： iframe magnific-popup

【解决方案1】：

感谢 Dmitry 为我指明了正确的方向，以下是对我有用的答案：

回调：

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

【讨论】：

【解决方案2】：

您可以使用弹出事件来创建自定义操作，例如：

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

【讨论】：

感谢您指出正确的方向。我通过稍微修改您的答案找到了解决方案。我已将其发布为答案。

【解决方案3】：

如果我们只检测 iframe 并从容器中切换 mfp-s-ready 类，而不是轮询，怎么样。如果是图像，则在加载图像时将mfp-s-ready 添加到mfp-container div。我们可以简单地将其切换为视频 (iframe) + 使用一些自定义 css 来发挥我们的优势。

callbacks: {
  beforeAppend: function () {
    if (this.currItem.type === 'iframe') {
     $('.mfp-container').removeClass('mfp-s-ready');
    }
    this.content.find('iframe').on('load', function () {
     $('.mfp-container').addClass('mfp-s-ready');
    });
  }
}

并添加这个 CSS：

.mfp-container .mfp-content {
    display: none;
}

.mfp-s-ready.mfp-container .mfp-content {
    display: inline-block;
}

这还将支持包含视频和图像的混合模式画廊。

【讨论】：