預加載youtube視頻iframe的平滑jQuery動畫？

我有一些鏈接，通過傳遞Youtube href如下所示，使用jQuery slideDown出現在彈出窗口中的youtube視頻iframe。工作正常，但效果震撼，因爲Youtube img不'尊重'jQuery slideDown並順利顯示。例如。預加載youtube視頻iframe的平滑jQuery動畫？

http://jchmusic.com/videos

...只需點擊任意4個圖片的鏈接。

有沒有辦法以某種方式'預裝'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

來源

2012-11-18 jchwebdev

我有類似的問題。我有一個頁面動畫，頁面從瀏覽器的側面飛入，而YouTube視頻的頁面會產生類似的震撼效果。這將是很好的找到一種預加載YouTube的iframe的方式，類似於我如何預加載所有圖像，以便過渡平穩。 – nearpoint

怎麼樣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); 
});

來源

2012-11-18 20:13:14

沒有。所做的只是讓用戶想知道爲什麼他們不得不等待發生的事情。我需要的是某種方式（這聽起來完全是無知的），將youtube圖像預加載到「屏幕緩衝區」中 - 在點擊之前...類似於預加載img技巧。但我不知道如何在JS中做到這一點。 – jchwebdev

這對我而言現在也很好，現在... – faboolous

預加載youtube視頻iframe的平滑jQuery動畫？

回答

相關問題