jquery.cycle: le immagini non vengono caricate in ffox?
-
20-09-2019 - |
Domanda
Ho notato un problema con una semplice pagina iniziale utilizzando jquery.cycle.
Con firefox (Firebug installato), le immagini rotanti non verranno visualizzate la prima volta che si accede alla pagina (senza cache di - ctrl-F5) ancora verranno caricati correttamente durante le richieste successive.
Non vedendo questa condizione con altri browser (ad esempio, Chrome, Safari).
Tutte le idee perché?
(pagina è piccolo - ma qui è le informazioni rilevanti)
<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>
E qui è 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;}
Soluzione
Ho visto questo problema prima (questo è un estratto della mia precedente risposta al Jquery Cycle + Firefox squishing Immagini ).
Il problema è che Firefox risolve dimensioni dell'elemento img una volta per tutte al punto lo stile di visualizzazione è impostata su none (quando si avvia il ciclo). Quindi, se l'immagine non ha finito di caricare (che probabilmente non ha su di una richiesta GET iniziale), i suoi attributi altezza e larghezza di stile sono piccole (non sono sicuro esattamente quello che corrispondono - forse le dimensioni del segnaposto immagine di Firefox , anche se nel suo caso si tratta fino 164 x 16 pixel).
durante le richieste successive, Firefox conosce le loro dimensioni, dato che sono nella cache (sto cercando di indovinare un po 'qui: forse è solo loro carica prima del ciclo può impostare display: none
).
È possibile risolvere questo specificando dimensioni della vostra middle
di div in anticipo:
#middle {
width: 974px;
height: 110px;
}
(Cioè, fino a quando non stai facendo nulla complicato con le vostre immagini -. Il mio sito web si sta caricando in modo dinamico le immagini di varie dimensioni, così ho dovuto svolgere ulteriore lavoro di gambe)