jquery.cycle: изображения не загружаются в ffox? - PullRequest
Новая
       4

jquery.cycle: изображения не загружаются в ffox?

2 голосов
/ 12 января 2010

Заметил проблему с простой заставкой с использованием 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 Ответ

1 голос
/ 12 января 2010

Я видел эту проблему раньше (это отрывок из моего предыдущего ответа на Цикл Jquery + Firefox Squishing Images ).

Проблема в том, что Firefox исправляет размер элемента img раз и навсегда в тот момент, когда стиль отображения не установлен равным (при запуске цикла). Поэтому, если изображение не завершило загрузку (чего, вероятно, не было при первоначальном запросе GET), его атрибуты стиля высоты и ширины невелики (я не уверен, что именно они соответствуют - возможно, размер заполнителя изображения Firefox хотя в вашем случае он достигает 164 х 16 пикселей).

При последующих запросах Firefox знает их размеры, поскольку они находятся в кеше (я думаю, здесь немного: возможно, он просто загружает их, прежде чем цикл может установить display: none).

Вы можете решить эту проблему, предварительно указав размер middle div: 

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

(То есть, пока вы ничего не делаете со своими изображениями - мой веб-сайт динамически загружает изображения различного размера, поэтому мне пришлось выполнять дополнительную работу.)

...