Question

我使用iframe方法在magnific popup中加载内容。

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

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

.mfp-preloader css类没有任何帮助，因为它隐藏在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');
    });
 }
}

Answer 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;
}

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

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

3 个答案: