Fancybox iframe 中背景闪烁白色
我一直在开发一个投资组合网站，主页上的缩略图加载一个单独的页面，其中包含 .cycle jquery 幻灯片，位于 Fancybox。 .cycle 幻灯片的箭头位于透明背景上，看起来就像漂浮在精美框的边缘一样。现在问题就在这里，当使用 safari 或 opera 时，在页面正确加载之前，完整的 iframe 会闪烁白色。
我做了研究，发现这个问题是由 iframe 引起的（http://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/）。然而，由于我的 iframe 是通过 Fancybox 加载的，所以 css-tricks.com 上所述的解决方案不适用。我也一直在尝试 css-tricks.com 上的无限循环博客提出的解决方案，但没有成功。
任何帮助将不胜感激！
index.html 标题
<!DOCTYPE HTML>
<head>
<title>Forbes Massie</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#content a").fancybox({
'padding' : 0,
'margin' : 0,
'width' : 1036,
'height' : 628,
'autoScale' : false,
'easingIn' : 'fade',
'easingOut' : 'none',
'opacity' : true,
'type' : 'iframe',
'centerOnScroll' : true,
'overlayOpacity' : '0.8'
});
});
</script>
</head>
slideshow.html
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<style type="text/css">
body {
background-color:transparent;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fade').fadeIn(700);
});
$('.slideshow').cycle({
prev: '#prev1',
next: '#next1',
timeout: 0,
speed: 500,
after: onAfter
});
if ($('.slideshow') && ($('.slideshow').children().length == 1)) {
$('#prev1').hide();
$('#next1').hide();
}
});
function onAfter(curr,next,opts) {
var caption = (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
</script>
<title>slideshow10</title>
</head>
<body>
<div id="fade">
<a href="#" id="prev1"><div class="arrows_prev"></div></a>
<div id="box">
<div class="text">
<span class="slideshow_p">Title</span>
<br/>
<h2>Competition, Tate Modern, London</h2>
<br/>
<span class="slideshow_p">Client</span>
<br/><h2>Carmody Groarke Architects</h2>
</div>
<div class="slideshow">
<img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant_competition_external.jpg" alt="" />
<img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant Competition_Internal.jpg" alt="" />
</div>
<div id="line"> </div>
</div>
<a href="#" id="next1"><div class="arrows_next"></div></a>
</div>
</body>
</html>
I have been working on a portfolio website where the thumbnails on the home page load a seperate page containing a .cycle jquery slideshow, within a Fancybox. The arrows for the .cycle slideshow are on a transparent background to appear as if they are floating off the edge of the fancy box. Now here lies the problem, when using safari or opera the complete iframe flashes white before the page is loaded properly.
I have done my research and found out that this problem is caused by iframe (http://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/). However as my iframes are loading through Fancybox the solution stated on css-tricks.com doesn't apply. I have also been trying the solution put forward by The Infinite Loop Blog on css-tricks.com but have had no luck.
Any help would be greatly appreciated!
Head of index.html
<!DOCTYPE HTML>
<head>
<title>Forbes Massie</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#content a").fancybox({
'padding' : 0,
'margin' : 0,
'width' : 1036,
'height' : 628,
'autoScale' : false,
'easingIn' : 'fade',
'easingOut' : 'none',
'opacity' : true,
'type' : 'iframe',
'centerOnScroll' : true,
'overlayOpacity' : '0.8'
});
});
</script>
</head>
slideshow.html
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<style type="text/css">
body {
background-color:transparent;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fade').fadeIn(700);
});
$('.slideshow').cycle({
prev: '#prev1',
next: '#next1',
timeout: 0,
speed: 500,
after: onAfter
});
if ($('.slideshow') && ($('.slideshow').children().length == 1)) {
$('#prev1').hide();
$('#next1').hide();
}
});
function onAfter(curr,next,opts) {
var caption = (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
</script>
<title>slideshow10</title>
</head>
<body>
<div id="fade">
<a href="#" id="prev1"><div class="arrows_prev"></div></a>
<div id="box">
<div class="text">
<span class="slideshow_p">Title</span>
<br/>
<h2>Competition, Tate Modern, London</h2>
<br/>
<span class="slideshow_p">Client</span>
<br/><h2>Carmody Groarke Architects</h2>
</div>
<div class="slideshow">
<img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant_competition_external.jpg" alt="" />
<img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant Competition_Internal.jpg" alt="" />
</div>
<div id="line"> </div>
</div>
<a href="#" id="next1"><div class="arrows_next"></div></a>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
编辑 fancybox css 文件中的 #fancybox-outer 背景属性以更改 iframe 的默认背景颜色。
Edit the #fancybox-outer background property within the fancybox css file to change the default background color of the iframe.