如何在Shadowbox中加載內容之前防止iframe白色閃爍？

我已經設置了shadowbox jquery插件來啓動一個由vimeo文件和iframe中的一些html內容組成的庫。該功能工作正常，但在內容完全加載之前，我正在經歷來自iframe的可怕白色閃爍。如何在Shadowbox中加載內容之前防止iframe白色閃爍？

您可以在行動中看到這個here

太極拳確實有一個內置的加載屏幕，但它消失得太早 - 之前的內容是滿載。

我已經嘗試了很多解決方案，包括Chris Coyier的this one，但他們不適合我。

我認爲必須有辦法做到這一點，通過使用jquery糾正現有的Shadowbox加載屏幕等到內容完全加載之前消失，但我不知道如何做到這一點。

我現在打電話太極拳與此代碼的頭：

Shadowbox.init({ 
    overlayOpacity: 1, 
    gallery:  "test", 
    continuous:  false, 
    counterType: "default", 
    displayNav:  true 
});

而對於畫廊的標記是：（我不認爲這是相關的問題在這裏，但爲了清楚起見，這是一個自定義WordPress主題的一部分）

<a class="test" href="http://player.vimeo.com/video/43642414 title=0&amp;byline=0&amp;portrait=0" allowTransparency="true" rel="shadowbox[test];player=iframe;width=960;height=540" onclick="return false;" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a> 
<a class="test" rel="shadowbox[test]width=960;height=540" href="<?php the_permalink(); ?>" title="Credits"><?php the_post_thumbnail(); ?></a>

一切是這樣做，但需要客戶簽字，起飛前解決這個問題 - 任何幫助，將真正的讚賞！

來源

2012-07-25 Jonathan Garner

我發現一個解決方案，通過強制加載屏幕保持可見通過CSS，然後延遲淡出，以涵蓋任何白色閃爍。

Shadowbox.setup("a.test", { 
    player:   "iframe", 
    overlayOpacity: 1, 
    gallery:  "test", 
    continuous:  false, 
    counterType: "default", 
    displayNav:  true, 
    onFinish: function(){ 
     $('#sb-loading').css({'display': 'block'}).delay(800).fadeOut(600); 
    }

來源

2012-07-26 12:54:27

如何在Shadowbox中加載內容之前防止iframe白色閃爍？

回答

相關問題