Javascript probelm i IE

Og så lige et link :-D

http://smagslog.dk/fade%20test/index.html

Det er for stort !o]

Et billede på 212 kb er stort set altid for stort at bruge på en internet-side, du kan sandsynligvis reducere det til omkring 20-40 kb uden at du kan se forskellen på hjemmesiden (f.eks. i PhotoShop bruge muligheden Gem til web eller sådan noget !-)

Jeg gætter simpelthen på, at du har den samme indstilling, som jeg har i IE, nemlig at den altid skal hente en ny side fra kilden, det vil bevirke, at den spørger serveren, om der skulle være komme en ny udgave af et billede, der bruges, og det vil sikkert bevirke, at billedet blinker så vildt, samtidig med at springene er meget store ...

-- prøv at ændre indstillingen under Funktioner --> Indstillinger... --> Midlertige Filer/Indstillinger, og du vil opdage, at den kører helt stille og roligt ...

-- og prøv så at sammenligne med den måde, det fungerer på, når du ser de små spring, jeg bruger i min fade-in/-out-ting: http://roenving.users.whitehat.dk/WD5Opacity.html , hvor springene kun er på 1 ...

-- iøvrigt bruger du .style.filter = 'noget', hvilket faktisk bør være .filters.alpha.opacity (som også brugt på min side !-), men du skal så sørge for at den kode ikke kommer i nærheden af andre browsere ...

-- og du skriver alpha(opacity:TAL), det skal være alpha(opacity=TAL) !o]

<<
Det er for stort !o]

Et billede på 212 kb er stort set altid for stort at bruge på en internet-side, du kan sandsynligvis reducere det til omkring 20-40 kb uden at du kan se forskellen på hjemmesiden (f.eks. i PhotoShop bruge muligheden Gem til web eller sådan noget !-)
>>

Ja, det har du ret i, men det var også kun lige noget jeg brugte til denne test - bla. for at kunne se loading grafikken inden billedet bliver loadet.. :-) Det har vel næppe noget med de underlige blink i IE at gøre !?

<<
tter simpelthen på, at du har den samme indstilling, som jeg har i IE, nemlig at den altid skal hente en ny side fra kilden, det vil bevirke, at den spørger serveren, om der skulle være komme en ny udgave af et billede, der bruges, og det vil sikkert bevirke, at billedet blinker så vildt, samtidig med at springene er meget store ...

-- prøv at ændre indstillingen under Funktioner --> Indstillinger... --> Midlertige Filer/Indstillinger, og du vil opdage, at den kører helt stille og roligt ...
>>
Hmm.. Nu har jeg en mac og har ikke lige adgang til en PC nu... Det er emget muligt du har ret... Men er der ikke noget jeg kan gøre ved det ? Kan jo ikke bede alle folk om at gøre dette inden de skal ind og se siden :-)
Desuden har jeg svært ved at forstå hvordan det kan være et problem... Blinkene komemr så vidt jeg kan se hver gang den looper funktionen der skruer op for opacity... - På det tidspunkt ER billedet jo loadet!

<<
-- iøvrigt bruger du .style.filter = 'noget', hvilket faktisk bør være .filters.alpha.opacity (som også brugt på min side !-), men du skal så sørge for at den kode ikke kommer i nærheden af andre browsere ...
>>

Hvis du kigger på funktionen " setOpacity()" vil du se at den både bruger .style.filter = 'noget' og .filters.alpha.opacity og to andre :-) - Har scriptet herfra: http://clagnut.com/sandbox/imagefades/

<<
g du skriver alpha(opacity:TAL), det skal være alpha(opacity=TAL) !o]
>>

Ja det har du da ret i... Hmm.. det er hermed rettet :-) ( Sådan var scriptet da jeg stjal det! :-D )

Du skriver i øvrigt på din side at dit image fade ikke virker i Safari.. Det kan jeg hermed meddele at det gør :-)

--------------------
<<
-- iøvrigt bruger du .style.filter = 'noget', hvilket faktisk bør være .filters.alpha.opacity (som også brugt på min side !-), men du skal så sørge for at den kode ikke kommer i nærheden af andre browsere ...
>>

Hvis du kigger på funktionen " setOpacity()" vil du se at den både bruger .style.filter = 'noget' og .filters.alpha.opacity og to andre :-) - Har scriptet herfra: http://clagnut.com/sandbox/imagefades/
--------------------

Hov, var vist for hurtig her... Hmm... - .style.filter = "alpha(opacity="+opacity+")";  - har jeg set brugt to forskellige steder nu.. er det ikke rigtigt ?

Du kan også se det her ( tror i øvrigt dette script er bedre end det jeg har brugt )

http://www.splintered.co.uk/experiments/archives/javascript_fade/?photo=5

1.
Hvis du prøver at ændre dine spring bare ned til 5 ad gangen vil den (i min IE6/win !-) køre problemfrit ...

2.
Hvis du bruger IE/Mac til nogetsomhelst, er du gået galt i byen ...

-- selv den seneste udgave (er den 6 år gammel ?-) er simpelthen tåbelig til hvadsomhelst, og bør under ingen omstændigheder buges til validering af nogetsomhelst ...

-- og du er vel heller ikke så tåbelig at du surfer med den, når du alligevel har en spritny Safari indbygget i din OSX !-)

3.
Bemærk de små forskelle, for til IE skal du bruge .filters.alpha.opacity, til de andre skal du bruge .style.opacity/.KHTMLOpacity/MozOpacity !-)

-- og til det sidste skal jeg da takke, for jeg har ikke haft adgang til at teste det på mac siden jeg tilføjede css3-tingen !o]

-- tjah, jeg tror gerne  .style.filter = "alpha(opacity="+opacity+")"; virker, men der er direkte adgang til at sætte opaciteten ved at gå ind gennem filters-objektet, som dog vil generere fejl i andre browsere, hvorfor det er nødvendigt at spørge på, om det findes:

if(obj.filters)
  obj.filters.alpha.opacity = 100;

-- og det er princpielt en bedre kode-stil, ligesom innerHTML er et uvæsen, som faktisk ikke har hjemme i en tagget verden som (x)html repræsenterer !-)

<<
1.
Hvis du prøver at ændre dine spring bare ned til 5 ad gangen vil den (i min IE6/win !-) køre problemfrit ...
>>

Hmm, ja ok... Det kan jo være en nødløsning.... Er bare ikke lige DEN fade effekt jeg gerne vil have :-)

<<
2.
Hvis du bruger IE/Mac til nogetsomhelst, er du gået galt i byen ...

-- selv den seneste udgave (er den 6 år gammel ?-) er simpelthen tåbelig til hvadsomhelst, og bør under ingen omstændigheder buges til validering af nogetsomhelst ...

-- og du er vel heller ikke så tåbelig at du surfer med den, når du alligevel har en spritny Safari indbygget i din OSX !-)
>>

Ha ha, ja jeg glemte da at fortælle at det var IE til PC jeg talte om.... Du har fuldstændig ret i at IE til Mac ikke kan bruges til noget som helst!!!! - Den er så fejlbehæftet at det gør helt ondt :-D - Har i dag haft mulighed for at teste i IE til PC, men ahr ikke lige nu :-)

<<
Bemærk de små forskelle, for til IE skal du bruge .filters.alpha.opacity, til de andre skal du bruge .style.opacity/.KHTMLOpacity/MozOpacity !-)
på, om det findes:

if(obj.filters)
  obj.filters.alpha.opacity = 100;

>>

Ja ok, det er da lige værd at kigge på :-)

<<
-- og det er princpielt en bedre kode-stil, ligesom innerHTML er et uvæsen, som faktisk ikke har hjemme i en tagget verden som (x)html repræsenterer !-)
>>

Ok.. Hvorfor, og hvad skal jeg så bruge i stedet for innerHTML ?

Har nu prøvet at tilføje din rettelse med hensyn til :

if(obj.filters)
  obj.filters.alpha.opacity = 100;

Er det gjort rigtigt ?

Brug en xhtml-DOM-tilgang:

objekt.firstChild.nodeValue = værdi !o]

-- det kræver, at der ikke er noder i værdien (sådan nogle skal oprettes hver især !-), samt at der findes en node fra start ...

<div id="minDiv">&nbsp;</div>

document.getElementById("minDiv").firstChild.nodeValue = "Det virker !-)";

-- så vil No-break-spacet repræsentere en tekst-node, som vil være firstChild, som du så kan ændre node-værdi for !-)

Jepz !-)

-- og hvorfor det er forkert at bruge innerHTML er en lang forklaring, hvis den skal pindes helt ud, men grundlaget er, at xml skrives i noder, altså selvstændige entiteter, der har en moder-node og evt. børne noder, som hver især er objekter ...

-- det vil derfor være en form for avanceret vrøvl, at man inde i et aktivt x(ht)ml-dokument kan oprette nye objekter uden at kalde en objekt-constructor, som kan sørge for, at objektets grundlæggende egenskaber er til stede !-)

PS til 07/03-2006 00:29:21: "På det tidspunkt ER billedet jo loadet!"

-- det er netop det, der er problemet, at IE ved hver ændring i et billede eller dets container sender en http-forespørgsel, om der er kommet et nyt billede, det ser helt tåbeligt ud, hvis man trækker et helt færdigt objekt, der indeholder et billede ...

-- selve objektet eller billedet ændrer sig ikke, men bare ændringen i placeringen udløser den forespørgsel, hvorfor man får rigtigt mærkelige reaktioner ...

-- konklusionen er altså, at IE _ikke_ opfatter det som et loadet billede før den får tidsstemlet tilbage fra serveren !-)

Ok mange tak :-)

Men med hensyn til det blinkende billede.... Bliver jeg nød til at sætte værdien til 5 eller under for at det virker for folk der ikke har bedt deres browser om ikke at tjekke serveren for et nyt billede hver gang - og er det nok eller ?

Ahh.. ja så svarede du mig jo på mit spørgsmål mens jeg sendte det igen :-D Men ok så.. Det er jo noget skidt.. Er der nogen måde rundt om det ? - kan jeg evt. sætte serveren op til at billeder skal caches af browseren ( det var der en anden jeg kender der foreslog som løsning ) - eller hvad kan jeg gøre - hvis noget ? ( Og gud hvor jeg dog efterhånden hader IE !!! :-D )

SYnes i øvrigt også jeg har set scripts til at pre loade billeder med så de vises hurtigere - virker densalgs heller ikke i IE ?

I øvrigt undre det mig lidt at denne "fejl" tilsyneladende kun sker i IE når jeg lægger billedet som baggrund i en div jeg fader.. Ikke hvis jeg bare sætter fade funktionen direkte på et img tag !? ( Har testet efter tidligere i dag i IE/PC )

Jo, de virker sådan, at IE stadig sender forespørgslen (hvilket kan klares i en enkelt ip-pakke, den mindste enhed, der sendes over tcp/ip-protokollen !-), men afhængig af forbindelsen kan du få intet ud af preloaden, for de fleste prloadede ting er faktisk sådan noget som billed-knapper, der i forvejen er optimeret og derfor ikke kræver ret mange pakker ...

-- hvis du derimod bruger nogle ret tunge billeder, der skal skifte (f.eks. et slideshow med sommerferiebilleder !-), vil du tydeligt kunne se forskellen, men de grafiske knapper vil blinke ...

-- du kan ikke ændre brugerens indstillinger, og i og med at IE opfatter 'ved hvert besøg' som omfattende også billeder, der ikke vises med præcis samme´egenskaber, vil du i disse bredbåndsdage have et reelt problem ...

-- jeg prøvede for øvrigt at nedsætte ændringsfrekvensen til det mindste, jeg har oplevet som realistisk i javascript-timeouts, nemlig omkring 35 ms., og det gav den sjove effekt, at billedet slet ikke kom op før den kom på fuld opacitet, hvilket jeg tolker som om den først bliver færsig med konflikten mellem en ny forespørgsel og gentagelsen, når den er fuldt synlig !o]

-- jeg må indrømme, at jeg ikke har kigget på præcis forskellen med baggrunds- kontra forgrundsbilleder, men det passer med nogle af de bemærkninger, jeg har læst her og erfaringen med den der div med baggrundsbillede, der trækkes ,-(

PS. 'disse bredbåndsdage' skal opfattes som at alle selvfølgelig har en åben forbindelse og dermed ikke finder på normalt at læse en gammel udgave !-)

Hmm.. Takker mange gange for hjælpen - blev en del klogere, men desværre også lidt mere desillusoneret - Det er nu tredie gang i træk jeg er gået i gang med en hjemmeside ide som har vist sig ikke at kunne lade sig gøre pga. IE's ufattelige dårlige understøttelse af standarter m.m. :-( ( Lige i dette tilfælde måske ikke manglende understøttelse af standarter... Men den er stadig dum! basta :-D )

Nå, men humlen af det hele er at jeg ville lave en effekt hvor billeder hentes dynamisk via xmlhttprequest, og at det nye billede så fades ind oven på det gamle mens det gamle fades ud.. Det virker perfekt i Firefox ( og alle andre browsere jeg har testet ) men må nok bare gøre det lidt mere simpelt... æv

Hvis ikke du allerede har kigget kan du se den hjemmeside jeg arbejder på nu her www.smagslog.dk ( Den er langt fra færdig :-) ) - Det fungere så dejligt i Firefox :-)

- Hvordan giver jeg egentlig dig de der point ?

-- bemærk i øvrigt at du har et problem med at siden vises med utf-8, mens det ser ud til, at du har gemt html-filen med en andet karaktersæt !-)

-- og behold selv en ordentlig slat af pointene selv !o]

-- els velbekomme '-)

Hmm.. har ellers sat min editor til at gemme i utf-8 men kan da godt være jeg har gjort det forkert.. ( Det kan noget jo tyde på :-D )

Nå, men tak for hjælpen :-)

Prøvede lige at smide det over på vores egen server i dag og sætte http headeren for image mappen til at chace billederne ( eller sige til browseren at den skal - eller hvad det nu hedder ) - Det virkede og alt kørte flydende i IE/PC :-) - SÅ skal jeg bare have fundet ud af hvordan jeg sætter det op på den server hvor siden rent faktisk skal ligge :-)

- Fik jeg i øvrigt givet dig de point ? - Syntes jeg trykkede på dit navn og accepeter, men den ser stadig ud til at vil give pointene væk :-D

-- jeg siger i hvert fald tak for point ;~}