[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 

[erix]

Możesz wyjaśnić, dlaczego w JS chcesz robić coś, co możesz robić w CSS?

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

[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) (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

[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

[erix]

[JAVASCRIPT] pobierz, plaintext 
$().data()
[JAVASCRIPT] pobierz, plaintext 

[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 - odpowiedź stricte jQuery padła powyżej ale... to jest JS i chyba warto dalej przeczytać

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ć

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