Question

我已经设置了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>

其他一切都已完成，但需要在客户注销之前解决此问题 - 任何帮助都会得到真正的赞赏！

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);
   }

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

1 个答案: