jquery - 在 Shadowbox 中加载内容之前如何防止 iframe 白色闪烁？

Question

我已经设置了 shadowbox jquery 插件来启动一个画廊，它由一个 vimeo 文件和一个 iframe 中的一些 html 内容组成。该功能运行良好，但在内容完全加载之前，我遇到了来自 iframe 的可怕的白色闪烁。

您可以在实际操作中看到这一点 here

Shadowbox 确实有一个内置的加载屏幕，但它消失得太早了 - 在内容完全加载之前。

我已经尝试了很多解决方案，包括 this one由 Chris Coyier 编写，但它们不适合我。

我认为必须有一种方法可以通过使用 jquery 来纠正现有的 Shadowbox 加载屏幕以等待内容完全加载后再消失，但我不知道该怎么做。

我目前正在用头部中的这段代码调用 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>

其他一切都已完成，但需要在客户签字之前解决这个问题 - 我们将不胜感激任何帮助!

Answer 1

我找到了一个解决方案，通过 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);
   }