jquery.cycle: les images ne se chargent pas dans ffox?

A noté un problème avec une page d'accueil simple en utilisant jquery.cycle.jquery.cycle: les images ne se chargent pas dans ffox?

http://www.rynicdesign.com/

avec Firefox (Firebug installé), les images en rotation n'affiche pas la première fois que la page est accessible (sans cache - ctrl-f5) encore se charger correctement des requêtes suivantes.

Ne voit pas cette condition avec d'autres navigateurs (par exemple, chrome, safari).

Des idées pourquoi?

(page est petit - mais voici des informations pertinentes)

<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>

Et voici 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;}

Source

2010-01-12 jimg

Pouvez-vous coller dans votre code Javascript/CSS. Ce pourrait être une chose CSS. Assurez-vous également que vos images ont la même largeur et hauteur. – ewakened

Je l'ai vu ce problème avant (ce qui est un extrait de mon précédent répondez au Jquery Cycle + Firefox Squishing Images).

Le problème est que Firefox fixe la taille de l'élément img une fois pour toutes au moment où le style d'affichage est réglé sur (lorsque vous démarrez le cycle). Donc, si l'image n'a pas fini de charger (ce qu'elle n'a probablement pas fait sur une requête GET initiale), ses attributs de taille et de largeur sont petits (je ne sais pas exactement à quoi ils correspondent - peut-être la taille de l'espace réservé de Firefox , mais dans votre cas, il s'agit de 164 X 16 pixels). Sur les demandes suivantes, Firefox connaît leurs dimensions puisqu'elles sont dans le cache (je devine un peu ici: peut-être qu'il les charge juste avant que le cycle ne puisse définir display: none).

Vous pouvez résoudre ce problème en spécifiant votre middle taille de div à l'avance:

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

(C'est, aussi longtemps que vous ne faites rien compliqué avec vos images - mon site web est de charger dynamiquement les images de taille variable, j'ai donc dû effectuer des jeux de jambes supplémentaires.)

Source

2010-01-12 14:33:39

Merci Jeff - l'ajout de la largeur/hauteur a fait la différence. – jimg

jquery.cycle: les images ne se chargent pas dans ffox?

Répondre

Questions connexes