附加 iframe 会延迟 javascript 动画

Question

我正在构建一个灯箱，当它打开时，我附加了一个 iframe（vimeo 通用 iframe 嵌入代码），但还有另一个动画正在运行，即从屏幕底部滑出的描述。

在追加的那一刻，一切似乎都停顿了一下，可能是因为 iframe 占用了所有资源？有什么办法可以防止这种情况发生吗？

当我在不附加 iframe 的情况下进行测试时（显示黑屏），一切运行顺利。我需要这些动画同时发生。

Answer 1

除非您在加载时自动播放视频，否则最好的方法是仅加载图像而不是视频本身。

这是一个使用图像和自动播放而不是加载视频的示例：http://embedly.github.com/embedly-jquery/examples/autoplay.html

代码如下所示：

$(document).ready(function() {
    //Replace the url with an image
    $(".video a").embedly({maxWidth: 500,
                       autoplay: true,
                       success : function(oembed, data){
                         //replace the a tag with an image
                         var d = $('<a href="#" class="play"><span></span></a>')
                              .css('background-image', 'url('+oembed.thumbnail_url+')')
                              .data('oembed', oembed);
                         data.node.replaceWith(d);
                       }
                    });
    // When the user clicks play the video is loaded inline.
    $('a.play').live('click', function(e){
      e.preventDefault();
      $(this).replaceWith($(this).data('oembed').html);
    });
  });