jquery - 预加载 youtube 视频 iframe 以获得更流畅的 jquery 动画？

Question

我有许多指向 youtube 视频 iframe 的链接，这些链接使用 jQuery slideDown 通过传递 Youtube href 出现在弹出窗口中，如下所示。工作正常，但效果很刺耳，因为 Youtube img 不“尊重” jQuery slideDown 并流畅地显示。例如。

http://jchmusic.com/videos

...只需单击 4 个 img 链接中的任何一个。

有没有办法以某种方式“预加载”Youtube iFrame（或其他技术）的内容，以便让 slideDown 错觉更好？（顺便说一句：我已经尝试附加单独的节点，而不是像下面这样的所有一个大字符串，但它没有效果。）

jQuery('ul.slideshow a').click(function(e) {
    e.preventDefault();          
    var pNum = jQuery(this).attr('href');
    jQuery('#modalpopup #inside').empty();          
    jQuery('#modalpopup #inside').append('<iframe width="420" height="315" src="http://www.youtube.com/embed/' + pNum + '" frameborder="0" allowfullscreen></iframe>');
    iH = jQuery(document).height();
jQuery('#overlay').height(iH - 112).fadeTo( 'slow', .2 );
    jQuery('#modalpopup').slideDown(1000);
});

TIA,

---JC

Answer 1

一个怎么样setTimeout

jQuery('ul.slideshow a').click(function(e) {
    e.preventDefault();
    var pNum = jQuery(this).attr('href');
    jQuery('#modalpopup #inside').empty();
    jQuery('#modalpopup #inside').append('<iframe width="420" height="315" src="http://www.youtube.com/embed/' + pNum + '" frameborder="0" allowfullscreen></iframe>');
    setTimeout(function() {
        iH = jQuery(document).height();
        jQuery('#overlay').height(iH - 112).fadeTo('slow', .2);
        jQuery('#modalpopup').slideDown(1000);
    }, 1200);
});​