javascript fade in ohne jquery
herky 18.06.2010 - 00:02 2165 5
herky
natürlicher fressfeind
|
grüße an alle,
ich suche jetzt schon seit über einem tag nach einer brauchbaren möglichkeit ein bild einfaden zu lassen OHNE jquery dazu in gebrauch zu nehmen.
haltet mich für dumm, aber ich will nicht dass jeder nutzter auf grund eines mini bild effektes 50k daten unnötig mit runterlädt die er eigentlich wirklich nicht brauch wird.
meine eigenen ansätz mit einer while loop - waren von keinem erfolg gekrönt. kein fading sondern ein einfaches "da" war das ergebnis.
wenn sich wer von euch ein wenig auskennt oder idealer weise eine seite kennt die das thema behandelt würd ich mich freuen.
greets
herky
|
Rektal
Here to stay
|
Faden wird vermutlich mit opacity gelöst. Also in Interval das Opacity-Attribut des jeweiligen Elements manipulieren. Üblicherweise Werte von 0 bis 1 und dann noch die verschiedenen X-Browser Tests durchführen (das Property muss nicht überall gleich heißen). Ich denke mir: mir wärs den Aufwand nicht wert, weil jQuery Browserübergreifend erprobt ist (Qualitätssicherung), da tun die paar KB nicht weh. Selbst den jQuery JS-Code musst natürlich in mehreren Browsern testen, und das reicht mir schon, wenn ich dran denk eine eigene Fade-Implementierung (gut, die ist vermutlich eh Trivial, aber der Teufel steckt im Detail) überall testen zu müssen ... Außerdem kannst du durch geeignete Webserver-Konfiguration erreichen das nur ein einziges mal pro Client geladen werden muss. Alternativ kannst du auch das jQuery CDN verwenden, siehe http://code.google.com/apis/ajaxlib...ntation/#jquery . Hier sind die Chancen größer das die User es schon haben und somit gar nicht laden müssen. Ich würds verstehen wenn du sagst es wäre zu deiner persönlichen Education, dann würde ich aber gleich in den jQuery-Source reinfahren und mir passenden Teile rausholen (oder von mir aus auch in scriptaculous rumschnüffeln). Aber: jedem das seine ;-)
|
herky
natürlicher fressfeind
|
es ist ne mischung - ich will es einfach selbst coden damit ich meine eigenen vorstellungen (fps, genaue dauer, fadeverläufe und dergleichen) mit einarbeiten kann - wie du schon geschrieben hast gehts über die opacity - missa knowz - aber noch hat sich mir nicht eröffnet warum es zB mit einer for loop nicht will  document.getElementById("bildID").style.opacity = 0;
x = document.getElementById("bildID").style.opacity;
for(i=x; i<0.99;i = i + 0.01) {
setTimeout('', 100)
document.getElementById("bildID").style.opacity = parseFloat(document.getElementById("bildID").style.opacity) + 0.01;
}
das war mein ansatz - ist gerade einfach nur mal als idee da getippt - kA ob ich es genau so hatte greets
|
prayerslayer
Oar. Mh.
|
Bin jetzt kein JS Gott, aber wann wird die Funktion aufgerufen? Schaut nämlich danach aus als ob die bereits fertig wäre, wenn du die Seite siehst. Mein Ansatz wäre, $(document).ready... Oh wait. 
|
Gräflicher
Here to stay
|
Hab das hier mal verwendet, vielleicht hilfts dir ja. Sind auch etliche Browserweichen im Quelltext. click here
|
Rektal
Here to stay
|
@herky: Hab den verdacht dir fehlts an ein paar JS Grundlagen ...? setTimeout() führt einen Code in x-Milisekunden aus. Du kannst nicht den bestehenden Ablauf damit "anhalten", insofern ist dein setTimeout() in deiner Schleife ein No-Op. Siehe auch https://developer.mozilla.org/en/window.setTimeoutUnd selbst wenn du das könntest: du kannst nicht einfach in einer Schleife mehrmals im HTML was ändern und jede einzelne Änderungen sehen. Das Update des HTML passiert nicht zwischen den JS Code-Zeilen sondern wenn dein JS abgearbeitet ist. Insofern musst du also mit setInterval() (siehe https://developer.mozilla.org/en/DOM/window.setInterval ) deinen Code aufrufen (der Teil innerhalb deiner Schleife sozusagen) und die Opacity ein klein wenig ändern. Und du musst entsprechend für setInterval() auch eine Abbruchbedingung implementiert, sonst hörts nicht auf. Das ist sehr ähnlich dem was ich http://www.overclockers.at/include_coding_stuff hier http://www.overclockers.at/include_...833#post3021833 gepostet habe. HTH :-) Edit:Im Code von Gräflicher sieht man schön warum man sich das nicht selber antun will: if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
...
|
Anmeldung