1

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

你可以在这里看到这个

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

我已经尝试了很多解决方案，包括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>

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

4

1 回答 1

0

我找到了一个解决方案，强制加载屏幕通过 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-26T12:54:27.790 回答