jquery.цикл:изображения не загружаются в ffox?
-
20-09-2019 - |
Вопрос
Заметил проблему с простой заставкой с использованием jquery.cycle.
При использовании 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&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>
А вот всплеск.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).
Проблема в том, что Firefox исправляет размер элемента img раз и навсегда. в этот момент для стиля отображения установлено значение «нет» (когда вы начинаете цикл).Таким образом, если изображение не завершило загрузку (чего, вероятно, не было в исходном запросе GET), его атрибуты стиля высоты и ширины малы (я не уверен, чему именно они соответствуют — возможно, размеру заполнителя изображения Firefox). , хотя в вашем случае это 164 X 16 пикселей).
При последующих запросах Firefox знает их размеры, поскольку они находятся в кеше (здесь я предполагаю немного:возможно, он просто загружает их до того, как цикл установится display: none
).
Вы можете решить эту проблему, указав свой middle
размер div заранее:
#middle {
width: 974px;
height: 110px;
}
(То есть, если вы не делаете ничего сложного со своими изображениями — мой веб-сайт динамически загружает изображения разного размера, поэтому мне пришлось выполнять дополнительную работу.)