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!