Soy bastante nuevo en diseño web, acabo de crear el siguiente sitio webhttp: //www.janewaltonwatercolours.co.u, y aparte de un par de gliches menores, funciona en todos los navegadores.

Sin embargo, en Chrome, mi función de JavaScript para precargar imágenes no funciona (provoca parpadeo de las imágenes de la barra de navegación, entre otras cosas) y después de haber intentado todo y no encontrar ninguna respuesta en la web, me estoy volviendo loco ... ..

Aquí está el código relevante: -

var navbarImages = new Array();
preload(navbarImages,"images/navbar/topbigdrophover.gif","images/navbar/topdrophover.gif","images/navbar/tophover.gif");

function preload() {
    var images = preload.arguments[0];

    for (i = 1; i < preload.arguments.length; i++) {    
        images[i-1] = new Image();
        images[i-1].src = preload.arguments[i];
        }
    }

Esto funciona bien para todos, excepto Chrome: ¿alguna idea?

¡Cualquier ayuda recibida con gran satisfacción!

Migue

Más detalles: la barra de navegación parpadea al pasar el mouse, lo que sugiere que Chrome no precarga las imágenes. Esto está respaldado por grandes imágenes de vista previa que no se cargan previamente en las páginas de la galería de miniaturas.

La hoja de estilo main.css se carga cuando la página se carga por primera vez, luego, dependiendo del tamaño de la pantalla, se carga una segunda hoja de estilo para adaptarse al tamaño de la pantalla. Sin embargo, la segunda hoja de estilo no afecta la barra de navegación.

Code para la barra de navegación en main.css: - (un poco desordenado, lo sé ...)

nav {position: relative; margin: 0 auto; text-align: center; height: 35px; line-height: 35px; font-size: 16px;}

.top {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}

.topbig {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}

.topdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topdrop2.gif) no-repeat right top;color:#ccc;}

.topbigdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topbigdrop.gif) no-repeat right top;color:#ccc;}

.top:hover {color:#fff; background: url(../images/navbar/tophover.gif) no-repeat right top;}

.topbig:hover {color:#fff; background: url(../images/navbar/topbighover.gif) no-repeat right top;}

.topbigdropdown:hover {color:#fff; background:url(../images/navbar/topbigdrophover.gif) no-repeat right top;}

.topdropdown:hover {color:#fff; background:url(../images/navbar/topdrophover.gif) no-repeat right top;}