problema jquery hide/show

[sergiologa]

Buenas,

Llevo muy poco tiempo programando y tengo un problema, creo que bastante básico, pero que me trae de cabeza.

Tengo un código muy simple: dos botones y dos fotos.

El código es:

$(document).ready(init);

function init(){

$('.foto2').hide();
$('.foto1').show();
$('.opcion1').click(muestra1);
$('.opcion2').click(muestra2);
}

function muestra1(){
$('.foto2').hide();
$('.foto1').show();
}

function muestra2(){
$('.foto1').hide();
$('.foto2').show();
}

¿El problema? Pues que aparecen las dos fotos en pantalla a la vez, durante una milésima de segundo, antes de hacer caso a hide. Supongo que es por tema de navegadores, puesto que en local no ocurre.

Mi pregunta: ¿hay alguna forma de hacer que hide funcione antes de cargar el html para evitar que salgan en pantalla ambas durante un segundo?

He estado probando mil cosas con window.load, function, etc., he rebuscado en foros pero no tengo mucha idea y no he conseguido solucionar el problema.


Si alguien puede echarme un cable..
Gracias!

[stock]

oculta la imagen con CSS desde el principio.

Código:

.foto1{display:none;}

saludos y suerte

[maycolalvarez]

ready se ejecuta al completar el DOM, por eso en línea se retraza y no en localhost, lo que debes hacer es establecer directamente las propiedades con CSS antes de recurrir a javascript:

Código:

.foto2,
.foto1{
display:none;/*o usas visibility:hidden; (uno de dos)*/
}

[mayid]

Exacto lo que te dicen: CSS soluciona las cosas.

De no tener esa alternativa podes probar el codigo ...
$('.foto2').hide();
... justo despues de declarar la foto en html, en vez de en el header.

Pero no veo por que ensuciar las cosas asi. Usa CSS.

[maycolalvarez]

Iniciado por mayid

Exacto lo que te dicen: CSS soluciona las cosas.

De no tener esa alternativa podes probar el codigo ...
$('.foto2').hide();
... justo despues de declarar la foto en html, en vez de en el header.

Pero no veo por que ensuciar las cosas asi. Usa CSS.

con css es mejor, todo depende de la carga del DOM, en algunos navegadores esto si serviría

[sergiologa]

Muchas gracias!

Funciona perfectamente, con la de vueltas que había dado..

En CSS había probado con overflow hidden pero me fallaba por otro lado.