题
注意与使用jquery.cycle简单醒目网页的问题。
使用火狐(安装萤火虫),旋转图像将不显示第一次访问页面时(没有高速缓存 - CTRL-F5)尚未将正确地加载在后续请求。
没有看到与其他浏览器(即,铬,野生)这个条件。
任何想法,为什么?
(页小 - 但这里是相关的信息)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css" />
<link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(document).ready(function() {
$('.middle').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
autostop: 1,
timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
});
});
//--><!]]></script>
</head>
<body id="page">
<div id="doc4" class="main-frame">
<div class="top"></div>
<div class="middle" align="center">
<img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" />
<a href="/about"><img src="/templates/splash/images/enter.gif" alt="click to enter website" /></a>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
这里是splash.css
html, body, #page, #doc4 {height:100%;margin:auto;}
.top, .middle, .bottom {clear:both;overflow:auto;display:block;}
.middle {background-color:#ffffff;overflow:hidden;}
.top, .bottom {height:35%;}
.top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
.bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}
#doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
解决方案
我已经看到了这个问题之前(这是我刚才的答复来的 Jquery的周期+火狐压扁图像的)。
问题是,Firefox的修复img元素的尺寸一劳永逸的的显示样式设置为none点的(当你开始循环)。因此,如果图像尚未完成加载(它可能还没有对初始的GET请求),其高度和宽度样式属性是小(我不知道他们究竟对应 - 也许Firefox的图像占位符的大小虽然在您的情况下,它出现164×16个像素)。
在随后的请求,火狐知道它们的尺寸,因为他们是在缓存中(我在这里猜测一下:也许它只是加载它们之前周期可以设置display: none
)。
您可以通过事先指定的middle
div的大小解决这个问题:
#middle {
width: 974px;
height: 110px;
}
(也就是说,只要你没有做复杂的事情与您的图像 - 我的网站是动态加载不同的大小,所以我不得不执行额外的步法图片)
不隶属于 StackOverflow