Shadowbox에서 내용을로드하기 전에 iframe 화이트 플래시를 방지하려면 어떻게해야합니까?

Question

vimeo 파일과 iframe의 일부 html 콘텐츠로 구성된 갤러리를 실행하기 위해 shadowbox jquery 플러그인을 설정했습니다. 기능은 정상적으로 작동하지만 콘텐츠가 완전히로드되기 전에 iframe에서 두려운 흰색 깜박임이 발생합니다.

당신은 행동에서 볼 수 here

쉐도우는이 로딩 화면에 내장 가지고,하지만 너무 일찍 사라지고있다 - 내용이 완전히로드 전에.

저는 Chris Coyier가 this one을 비롯한 많은 솔루션을 시도했지만 저에게 적합하지 않습니다.

jquery를 사용하여 기존 Shadowbox 로딩 화면을 수정하여 내용이 완전히 사라질 때까지 기다릴 수있는 방법이 있어야한다고 생각하지만이 작업을 수행하는 방법을 모르겠습니다.

나는 현재 머리에이 코드와 쉐도우를 호출하고

:

Shadowbox.init({ 
    overlayOpacity: 1, 
    gallery:  "test", 
    continuous:  false, 
    counterType: "default", 
    displayNav:  true 
}); 

그리고 갤러리의 마크 업입니다 는 (I 명확성이 것이 여기에 문제와 관련된 생각하지 않지만 사용자 정의 워드 프레스 테마의 일부입니다) 다른

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