【问题标题】: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;
      }
      

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-01-27
        相关资源
        最近更新 更多