ugrás a tartalomhoz

javascript kép "fade-in" problémák

skate · 2007. Okt. 19. (P), 19.21
Sziasztok!

A http://clagnut.com/sandbox/imagefades/ link alatt bemutatott javascript alapú "fade in" teknikát akarnám alkalmazni kis módosítással.

A változtatás annyiból áll, hogy bélyegképre kattintva onclick cseréli az érintett nagy képet; a nagy kép (500x500 px) onload eseménye hívja meg az initImage() fv-t -> minden bélyegkép nagyobb megjelenítésénél a hozzá tartozó nagy képre lefut a fade-in, miután az betöltődött...

A megoldás tökéletesen működne (linux / firefox), azonban explorer (xp, 6.x) alól nézve a fade-in legalább 2x lassabban (értsd láthatatlantól a láthatóig eltelt idő) és darabosabban jön be (mintha a window.setTimeout nem jól kezelné az időt vagy a setOpacity lefutása megterhelné(?) a gépet).

A fura az, hogy ugyan az arról a gépről ugyan azt az iexpolrert használva az eredeti oldalon lévő fade-in normál sebességgel megy végbe. (?)

Mi lehet a különbség vagy mi foghatja meg az explorert?
‹ kép betöltése div-be Sorszámozott HTML lapok közötti lapozás, a végén ugorjon vissza az elejére ›
 ■
1

kód, link, stb

gex · 2007. Okt. 20. (Szo), 10.57
mutasd az oldalt ahol ezt tapasztalod. látatlanban mit mondjunk?
2

pub elérés nincs, de itt a kód

skate · 2007. Okt. 20. (Szo), 11.26
a vonatkozó részek:

doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...

a fadein -es kép

<div id="main_image">
<img src="/images/ize.jpg" alt="ize" title="ez egy ize"  id="main_img" style="visibility: hidden" onload="initImage()" />
</div>
...

bélyegkép, amire kattintva cserélődik a főkép és ismét fadein játszódik le rá

<img src="/images/thumb/bigyo.jpg" alt="bogyo" title="ez egy bigyo"  onclick="show_image('/images/bigyo.jpg')" style="cursor:pointer" />
...

a js külön file-ban van, ez a tartalma:

function show_image(img)
{
  var mi = document.getElementById('main_image');
  if (mi)
  {
    mi.innerHTML = '<img src="' + img + '" alt="" id="main_img" style="visibility: hidden" onload="initImage()" />';
  }
}

function initImage() {
	imageId = 'main_img';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
az említett ie alól nézve sokkal lassabb a fadein és darabosabb. win/firefox megintcsak oké, de ahogy mondtam ugyan az a gép + ie az eredeti oldalon található fadein -t normális sebességgel darabosság nélkül csinálja holott gyakorlatilag ugyan az a két megvalósítás...

ha pl rövidebbre veszem az időzítést és növelem a fade lépések számát (opacity += 5 és timeout 10) akkor firefox követi az időzítés csökkenést, ie viszont még lassabb lesz...

én nem értem :(
3

Proci

janoszen · 2007. Okt. 20. (Szo), 21.10
Az alfacsatornás dolgok notóriusan processzor-igényesek. Nekem pl az alap kép fadelgetése is darabos Linux/FF alatt.
6

lehet hogy más megoldás kell...

skate · 2007. Okt. 20. (Szo), 22.11
ha ennyire sarkalatos kérdés ez erőforrást tekintve akkor végső soron lehet, h egy sima kép váltás lesz csak, betöltés alatt pedig egy háttérben látszódó anim gif... :(
4

IE alatt más modell a fade-re

Rici · 2007. Okt. 20. (Szo), 21.52
IE alatt van egy ennél fejlettebbnek tekinthető eszköz a fade-re. Célszerű azt használni, a mostani iterációs jellegű helyett, ami időközönként változtatja az átlátszóságot. Ez nyilván maradhat a többi böngészőhöz.

Amit célszerű használni, az a fade filter. Találsz példákat is. A lényege, hogy van mondjuk egy div elemed, amihez hozzá van rendelve ez a filter. A filter-t apply állapotba állítod, és módosítasz az elem tartalmán. Ez a módosítás nem fog látszani, mivel a filter apply állapotban van. Ha megvannak a szükséges módosítások, a filtert átállítod lejátszás állapotba a play() metódussal. Ekkor az átmenetet végrehajta a böngésző, nem kell foglalkozni azzal, hogy pontosan hogyan és milyen időközönként változtat az átlátszóságokon.
5

köszi

skate · 2007. Okt. 20. (Szo), 22.09
köszi a linket, hasznosnak tűnik!