jquery.cycle:图片无法在ffox中加载?

时间:2010-01-12 14:12:35

标签: jquery-cycle

使用jquery.cycle注意到简单的启动页面存在问题。

http://www.rynicdesign.com/

使用firefox(安装了firebug),旋转图像将不会在第一次访问页面时显示(没有缓存 - ctrl-f5),但会在后续请求中正确加载。

其他浏览器没有看到这种情况(例如,chrome,safari)。

任何想法为什么?

(页面很小 - 但这里是相关信息)

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&amp;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;}

1 个答案:

答案 0 :(得分:1)

我之前见过这个问题(这是我之前对Jquery Cycle + Firefox Squishing Images的回答的摘录。)

问题是Firefox在显示样式设置为无时(启动循环时)一次性修复了img元素的大小。因此,如果图像尚未完成加载(它可能没有在初始GET请求中),它的高度和宽度样式属性很小(我不确定它们对应的是什么 - 可能是Firefox的图像占位符的大小,虽然在你的情况下,它出现了164 X 16像素。)

在后续请求中,Firefox知道它们的维度,因为它们位于缓存中(我在这里猜测一下:可能只是在循环可以设置display: none之前加载它们。)

您可以通过提前指定middle div的大小来解决此问题:

#middle {
    width:  974px;
    height: 110px;
}

(也就是说,只要您没有对图像进行任何复杂操作 - 我的网站会动态加载不同大小的图像,因此我不得不执行额外的步法。)