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

【问题标题】：How can I prevent iframe white flash before loaded content in Shadowbox?如何在 Shadowbox 中加载内容之前防止 iframe 白色闪烁？
【发布时间】：2012-07-23 14:10:43
【问题描述】：

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

你可以在here看到这个操作

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

我已经尝试了很多解决方案，包括 Chris Coyier 的 this one，但它们对我不起作用。

我认为必须有一种方法可以通过使用 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>

其他一切都已完成，但需要在客户签署之前解决此问题 - 任何帮助将不胜感激！

【问题讨论】：

标签： jquery html css iframe shadowbox

【解决方案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);
   }

【讨论】：