[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 

[zegarek84]

jako, że jQuery nie używam oraz nie dałeś przykładu live to nie musisz czytać bo to może się okazać "bzdurą"

pierwsze napiszę gdzie mi się wydaje, że to się może sypać - zważywszy na to, iż napisałeś o szybkości najazdu myszką na element... i dalej korzystasz z metody .replaceWith do podmiany obiektu w drzewie DOM - gdzie to też z tego obiektu który podmieniasz przechowujesz informację także... w ogóle to takie pytanie po co podmieniasz ten element?? - czemu nie skorzystasz ze standardowej podmiany źródła z obiektu image (przykład)(IMG:style_emoticons/default/questionmark.gif) (i to też raczej będzie jednym z rozwiązań)... lub informację przechowuj w samym linku (choć to nie do końca - może opiszę co się wg. mnie tam dzieje)...

w css nie ostylowałeś wielkości/rozmiaru linków, więc podczas podmieniania elementu w pierw następuje usunięcie starego (link się "kurczy" gdyż chwilę nie ma treści) po czym wstawiasz obrazek, jednak zanim wstawisz obrazek myszką możesz znaleść się poza pustym linkiem (.mouseleave) i od razu wykonujesz drugą metodę z hover'a (i tu raz zdążysz podmienić obrazek na nowy i będzie informacja co i jak i wróci na stary, a i może się zdarzyć, że z nowym nie zdążysz i błąd będzie na leave bądź enter jeśli ten link będzie "skakał")... idąc dalej analogiczną sytuację możesz mieć przy bardzo szybkim przesunięciu myszki nad linkiem - spróbujesz wykonać drugą akcję podczas gdy jeszcze tam nie zostanie wczytany element obrazka...

w skrócie - podmieniaj .src obrazka lub określ rozmiar linku i informacje dodatkowe przechowuj w tym linku a nie w obrazku (i nie bierz za pewnik, że tam będzie element obrazka, że zdążysz go wstawić)...

Ten post edytował zegarek84 6.04.2010, 14:39:51