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?
 
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
  1. <!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
  1. <div id="main_image">  
  2. <img src="/images/ize.jpg" alt="ize" title="ez egy ize"  id="main_img" style="visibility: hidden" onload="initImage()" />  
  3. </div>  
...

bélyegkép, amire kattintva cserélődik a főkép és ismét fadein játszódik le rá
  1. <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:
  1. function show_image(img)  
  2. {  
  3.   var mi = document.getElementById('main_image');  
  4.   if (mi)  
  5.   {  
  6.     mi.innerHTML = '<img src="' + img + '" alt="" id="main_img" style="visibility: hidden" onload="initImage()" />';  
  7.   }  
  8. }  
  9.   
  10. function initImage() {  
  11.     imageId = 'main_img';  
  12.     image = document.getElementById(imageId);  
  13.     setOpacity(image, 0);  
  14.     image.style.visibility = "visible";  
  15.     fadeIn(imageId,0);  
  16. }  
  17. function fadeIn(objId,opacity) {  
  18.     if (document.getElementById) {  
  19.         obj = document.getElementById(objId);  
  20.         if (opacity <= 100) {  
  21.             setOpacity(obj, opacity);  
  22.             opacity += 10;  
  23.             window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);  
  24.         }  
  25.     }  
  26. }  
  27. function setOpacity(obj, opacity) {  
  28.     opacity = (opacity == 100)?99.999:opacity;  
  29.     // IE/Win  
  30.     obj.style.filter = "alpha(opacity:"+opacity+")";  
  31.     // Safari<1.2, Konqueror  
  32.     obj.style.KHTMLOpacity = opacity/100;  
  33.     // Older Mozilla and Firefox  
  34.     obj.style.MozOpacity = opacity/100;  
  35.     // Safari 1.2, newer Firefox and Mozilla, CSS3  
  36.     obj.style.opacity = opacity/100;  
  37. }  
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!