添加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); 
    }); 
    });