[jQuery] Mój zbugowany preloader obrazków, Powoc przy odpluskwianiu. Opcje

[starach]

Hej,

Dawno dawno tematu... czytałem książkę o JS w której zawarty był rozdział o preloadingu obrazków. Chciałem z pamięci wykonać port tego skryptu na jQuery, ale zdaje się że coś spietruszyłem.

Jak najadę na przycisk od prawej bądź lewej strony to obrazek się podmienia, a potem znika. Zależy to też od szybkości z jaką najadę na owy link i z niego wyjdę.

[CSS] pobierz, plaintext 
#header ul { position:relative; top:62px; left:250px; width:489px; height:38px; margin:0; padding:0;
			 list-style:none; background:url('/images/Menu.png') no-repeat; }
#header ul li { float:left; margin:9px 0 5px 30px; border:1px solid #F00; }
#header ul li.first { margin-left:20px; }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<ul>
	<li><a href="#" title="Link 1"><img src="/images/Menu/link_1.png" alt="Link 1" /></a></li>
	<li><a href="#" title="Link 2"><img src="/images/Menu/link_2.png" alt="Link 2" /></a></li>
	<li><a href="#" title="Link 3"><img src="/images/Menu/link_3.png" alt="Link 3" /></a></li>
	<li><a href="#" title="Link 4"><img src="/images/Menu/link_4.png" alt="Link 4" /></a></li>
	<li><a href="#" title="Link 5"><img src="/images/Menu/link_5.png" alt="Link 5" /></a></li>
</ul>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
$m = new Menu();
$m.init();
 
function Menu()
{
	this.aImg = new Array();
	this.aImgHover = new Array();
	var $ths = this;
 
	this.init = function()
	{
		$("#header li a").each(
		function()
		{
			$ths.evt_HoverAppend($(this));
		});
	}
 
	this.evt_HoverAppend = function($link)
	{
		$iImgIndex = this.aImg.length;
		$Img = $("img", $link);
		$Img.attr("index", $iImgIndex);
 
		// Define hover image by adding -hover suffix before its extension
		$SImgSrc = new String($("img", $link).attr("src"));
		$sImgSrcExt = $SImgSrc.substring($SImgSrc.length - 3, $SImgSrc.length);
		$sImgHoverSrc = $SImgSrc.substring(0, $SImgSrc.length - 4) + "-hover." + $sImgSrcExt;
 
		$ImgHover = new Image();
		$ImgHover.src = $sImgHoverSrc;
 
		this.aImg.push($Img);
		this.aImgHover.push($($ImgHover).attr("index", $iImgIndex));
 
		$link.hover(
		function()
		{
			$Img = $("img", this);
			$Img.replaceWith($ths.aImgHover[$Img.attr("index")]);
		}, 
		function()
		{
			$Img = $("img", this);
			$Img.replaceWith($ths.aImg[$Img.attr("index")]);
		});
	}
}
[JAVASCRIPT] pobierz, plaintext 

[starach]

Jak sama nazwa wskazuje jest to preloader. Jeśli obrazek jest za duży, a użytkownik ma badziewny net to chwilę potrwa zanim mu się dany element strony załaduje. Może to spowodować przy np. menu brak elementu po najechaniu na niego.

Nie mniej jednak będę musiał prawdopodobnie zrezygnować z tej metody skoro nikt nie wiem gdzie może leżeć błąd.