[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]

Ehh oferma ze mnie. Zorientowałem się o co ci chodzi po pierwszym akapicie. I oczywiście zaczęło działać.

Mam jeszcze jedno pytanie dotyczące stricte jQuery. Jak w obiekcie wyselekcjonowanym za pomocą jQuery przechować informację?
np. Jeśli bym chciał opatulić link w jQuery $($link) to jak mam do niego przypisać zmienne overImage i outImage, żebym mógł się do nich odwołać w handlerze zdarzeń onmouseover i onmouseout?

[JAVASCRIPT] pobierz, plaintext 
function Menu()
{
	this.init = function()
	{
		for(i=0; i<document.images.length; i++)
		{
			$image = document.images[i];
			if($image.parentNode.tagName == "A" && $image.parentNode.parentNode.parentNode.id == "menu")
			{
				this.evt_HoverAppend($image);
			}
		}
	}
 
	this.evt_HoverAppend = function($image)
	{
		$link = $image.parentNode;
 
		// Define hover image by adding -hover suffix before its extension
		$SImgSrc = new String($image.src);
		$sImgSrcExt = $SImgSrc.substring($SImgSrc.length - 3, $SImgSrc.length);
		$sImgHoverSrc = $SImgSrc.substring(0, $SImgSrc.length - 4) + "-hover." + $sImgSrcExt;
 
		$link.overImage = new Image();
		$link.overImage.src = $sImgHoverSrc;
		$link.outImage = new Image();
		$link.outImage.src = $image.src;
 
		$link.onmouseout = function()
		{
			this.childNodes[0].src = this.outImage.src;
		}
		$link.onmouseover = function() {
			this.childNodes[0].src = this.overImage.src;
		}
	}
}
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował starach 6.04.2010, 17:52:33

[zegarek84]

Ehh oferma ze mnie. Zorientowałem się o co ci chodzi po pierwszym akapicie. I oczywiście zaczęło działać.

Mam jeszcze jedno pytanie dotyczące stricte jQuery. Jak w obiekcie wyselekcjonowanym za pomocą jQuery przechować informację?
np. Jeśli bym chciał opatulić link w jQuery $($link) to jak mam do niego przypisać zmienne overImage i outImage, żebym mógł się do nich odwołać w handlerze zdarzeń onmouseover i onmouseout?

heh (IMG:style_emoticons/default/winksmiley.jpg) - odpowiedź stricte jQuery padła powyżej ale... to jest JS i chyba warto dalej przeczytać (IMG:style_emoticons/default/winksmiley.jpg)

js jest mimowolnie silnie obiektowy - nawet zwykła funkcja potrafi być obiektem - nie sorki - zapędzam się ;p..

gdy przypisujesz anonimową funkcję do danego zdarzenia to suma sumarum ta funkcja jest zawsze inna - jak to można wykorzystać(IMG:style_emoticons/default/questionmark.gif)

przypisując te zdarzenia w pętli tylko raz musisz pamiętać indeks zapisanej zmiennej (źródła/ścieżki w zmiennej) z over bądź out i przypisując zdarzenie robisz np. tak:

[JAVASCRIPT] pobierz, plaintext 
$link.onmouseout = function()
		{
			this.childNodes[0].src = outImageSrc[2];/* jest to np. drugi obrazek i outImageSrc jest np. tablicą - funkcja zapamięta referencję do tej zmiennej ;) - więc potem nie musisz pamiętać */
		}
[JAVASCRIPT] pobierz, plaintext 

albo jeszcze inaczej (skoro i tak za każdym razem przypisujesz nową funkcje ;p) możesz trzymać referencję do obrazków w jakiejś tablicy i:

[JAVASCRIPT] pobierz, plaintext 
$link.onmouseout = function()
		{
			obrazek[2].src = outImageSrc[2];
		}
[JAVASCRIPT] pobierz, plaintext 

idąc dalej mały przykład gdzie nie musisz pamiętać w ogóle referencji do zmiennych - trochę przykład niby pod wyciek pamięci ale skoro to raz wykonasz w konstruktorze tego handlera to to Ci nie grozi (a żeby był gdzieś uchwyt do tych obiektów to też w tablicy możesz pamietać - tylko daję przykład że wszystkim zmiennym możesz przypisać null) - takie coś se na szybko po treningu napisałem i hula (IMG:style_emoticons/default/winksmiley.jpg) [jak pisałem na szybko to darowałem se preload - choć to jedna linijka ;p]:

[JAVASCRIPT] pobierz, plaintext 
function imageSrc($over, $out){
    this.over=function(){this.src=$over;};
    this.out=function(){this.src=$out;};
}
 
function obrazki(){
    var ob, over, src;
 
    ob=document.getElementById('ob1');
    over='http://www.internetmaker.pl/img/7_porad_dla_mistrzow_css,2,38,120,80,b10a5c5c.jpg';
    src = new imageSrc(ob.src, over);
    ob.onmouseout=src.over;
    ob.onmouseover=src.out;
 
 
    ob=document.getElementById('ob2');
    over='http://www.internetmaker.pl/images/ikony/nc02.gif';
    src = new imageSrc(ob.src, over);
    ob.onmouseout=src.over;
    ob.onmouseover=src.out;
 
    ob=null;src=null;over=null;
}
[JAVASCRIPT] pobierz, plaintext 

PS. skoro korzystasz z jQuery to używaj mouseenter a nie over gdyż over tutaj może Ci się wykonać 2 razy choć tego nie zauważysz - czyli enter na to jest optymalniejszy - podobnie z leave i out... idąc dalej to użyj tego hover gdyż to połączenie mouseenter i leave (IMG:style_emoticons/default/winksmiley.jpg)