2

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

1 に答える 1

1

私は以前にこの問題を見たことがあります（これは、Jquery Cycle + Firefox Squishing Imagesに対する私の以前の回答の抜粋です）。

問題は、Firefoxがimg要素のサイズを一度だけ修正し、その時点で表示スタイルがnoneに設定されていることです（サイクルを開始したとき）。したがって、画像の読み込みが完了していない場合（おそらく最初のGETリクエストではない）、その高さと幅のスタイル属性は小さいです（それらが何に対応するのか正確にはわかりません-おそらくFirefoxの画像プレースホルダーのサイズです、ただし、あなたの場合は164 X 16ピクセルになります）。

後続のリクエストでは、Firefoxはキャッシュ内にあるため、ディメンションを認識しています（ここで少し推測しています。サイクルが設定される前に、Firefoxがディメンションをロードするだけかもしれませんdisplay: none）。

middle事前にdivのサイズを指定することで、これを解決できます。

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

（つまり、画像で複雑なことをしていない限り、私のWebサイトはさまざまなサイズの画像を動的にロードしているため、追加のフットワークを実行する必要がありました。）

于 2010-01-12T14:33:39.693 に答える