如何在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白色闪烁？

回答

相关问题