obrazek "ładowanie" przed załadowaniem zdjęcia - jak to ugryść? Opcje

[InosU31]

Witam wszystkich

Mam kłopot i nie mogę sobie z tym poradzić (IMG:style_emoticons/default/sad.gif) a mianowicie... Zrobiłem sobie miniaturki i po kliknięciu otwiera mi się większe zdjęcie... Chciałbym aby w czasie ładowania zdjęcia (bądź zanim załaduje się zdjęcie) pokazywał się gif z ładowaniem... Po części udało mi się to zrobić z tym że ustawiłem gifa ładującego na przeźroczystość i niestety zdjęcia ładują się tez przeźroczyste (z tego względu że umieszczone są w bloku zawierającym ładujący obrazek) - jak postawię osobno ten blok div to nie działa mi obrazek ładujący

będę wdzięczny za jakieś podpowiedzi

ponizej kod jquery i html

[HTML] pobierz, plaintext 
 
css;
 
div#loading_mini {
		background: url(../loadin2.gif) no-repeat center center;
		width:100%;
		height:100%;
		display:none;
 
			}			
 
.fotki {
		display: none;
 
	}
 
 
 
 
 
//---- miniaturki ---------------
 
	  $('img[rel]').click(function () {
			var rel = $(this).attr("rel");
 
		$('.fotki').hide();
		$('#loading_mini').css("opacity",0.5).show();    //div zawierajacy obrazek ladowania 
 
		if ($('.fotki').load())
		{
		$('#loading_mini').css("opacity",1);
		$("div#"+rel).fadeIn('slow')	
		}
 
 
  });
 
<!--miniaturki-->
<div id="foto_mini">
 
		<div id="pokaz" style="display:none">	
			<div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto1.jpg" rel="fotka3"></img></div></div>	
 				<div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto2.jpg" rel="fotka2"></img></div></div>
 				<div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto3.jpg" rel="fotka1"></img></div></div>
 
		</div>
 
</div>
 
 
<!---duze fotki -->
	<div id="zdjecie">
				<div id="loading_mini">
				<div class="fotki" id="fotka1"><img src="user_page/id_2/duze_foto1.jpg"></img></div>
				<div class="fotki" id="fotka2"><img src="user_page/id_2/duze_foto2.jpg"></img></div>
				<div class="fotki" id="fotka3"><img src="user_page/id_2/duze__foto3.jpg"></img></div>
				</div>
					</div>
 
 
[HTML] pobierz, plaintext 

Pozdrawiam

[Comandeer]

A może:

Kod

img {
    background: url( loader.gif) no-repeat center center;
}

(IMG:style_emoticons/default/wink.gif)

[InosU31]

A może:

Kod

img {
    background: url( loader.gif) no-repeat center center;
}

(IMG:style_emoticons/default/wink.gif)

dzięki za odpowiedź... tylko gdzie ja mam to wstawić bo taki wpis mam już w bloku loading_mini... (IMG:style_emoticons/default/wink.gif)

Pozdrawiam

[Comandeer]

Bezpośrednio do img, czyli do elementu, w którym wyświetlane jest duże zdjęcie.