jquery.cycle: las imágenes no se cargan en FFox?

StackOverflow https://stackoverflow.com/questions/2049491

  •  20-09-2019
  •  | 
  •  

Pregunta

notado un problema con una página de bienvenida simple usando jquery.cycle.

http://www.rynicdesign.com/

Con Firefox (instalado Firebug), las imágenes que giran no mostrarán la primera vez que se accede a la página (sin caché - ctrl-F5) todavía se carga correctamente en las solicitudes posteriores.

No ver esta condición con otros navegadores (es decir, Chrome, Safari).

Cualquier idea por qué?

(página es pequeña - pero aquí es información relevante) 

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

Y aquí es 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;}
¿Fue útil?

Solución

He visto este problema antes (esto es un extracto de mi respuesta anterior a Ciclo Jquery + Firefox Imágenes aplastando ).

El problema es que Firefox corrige el tamaño del elemento img vez por todas en el punto del estilo de visualización se establece en ninguno (cuando se inicia el ciclo). Así que si la imagen no ha terminado de cargar (que probablemente no tiene en una petición GET inicial), sus atributos de altura y anchura de estilo son pequeñas (no estoy seguro exactamente lo que corresponden a - tal vez el tamaño de imagen de marcador de Firefox , aunque en su caso se trata de hasta 164 x 16 píxeles).

En las solicitudes posteriores, Firefox sabe sus dimensiones, ya que está en la memoria caché (supongo que un poco aquí: tal vez sólo los carga antes del ciclo puede establecer display: none).

Puede resolver esto especificando el tamaño de su div middle con antelación: 

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

(Es decir, siempre y cuando usted no está haciendo nada complicada con sus imágenes -. Mi sitio web está cargando dinámicamente imágenes de diferentes tamaños así que tuve que realizar trabajo de pies adicionales)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top