[JS] Pics pre-loaden voor mouseover

[dixon]

Beste medetweakers,

ik maak al een tijdje gebruik van een mouseover javascript. Het werkte altijd goed wanneer de plaatjes als files op de server staan. Voorbeeld:

code:

    imgHome_Up = new Image();
    imgHome_Up.src = "images/menu/Home_Up.gif";
    imgHome_Down = new Image();
    imgHome_Down.src = "images/menu/Home_Down.gif";

Ik heb begrepen dat wanneer er gebruik gemaakt word van de .src property dat de plaatjes in de browser-cache worden geladen. Dit zorgt ervoor dat de mouseover soepel verloopt. Dit heeft ook altijd goed gewerkt.

Nu heb ik in asp.net een bestand om plaatjes in te laden, namelijk GetImage.aspx. De reden hiervoor is dat de website meertalig is. Op het moment dat er een plaatje opgevraagd wordt (bijv. GetImage.aspx?ID_Picture=1) dan gaat GetImage.aspx.vb kijken naar de ingestelde taal (adhv een sessie variable) en haalt vervolgens het plaatje uit de database in de juiste taal. Er kunnen dus verschillende plaatjes komen uit het volgende stukje html code:

code:

    [img]"GetImage.aspx?ID_Picture=1"[/img]

Nu heb ik dus een mouseover menu gemaakt welke meertalig is. Lekker makkelijk dacht ik, ik hoefde alleen maar het volgende te doen:

code:

    imgHome_Up = new Image();
    imgHome_Up.src = "GetImage.aspx?ID_Picture=1";
    imgHome_Down = new Image();
    imgHome_Down.src = "GetImage.aspx?ID_Picture=2";

En nu werkt het mouseover script niet soepel meer. Elke keer dat je met de muis over het plaatje gaat, of er vanaf gaat, download de browser opnieuw het plaatje (ofwel volgt hij opnieuw de GetImage.aspx?ID_Picture=x URL). De hele pre-load functionaliteit is er vanaf. Wat kan ik hier aan doen? Ik wil graag gebruik blijven maken van GetImage.aspx.

[crisp]

de juiste headers meesturen vanuit je asp-script
Vergelijk de headers van een statisch plaatje bijvoorbeeld eens met die geserveerd door je script.

[ Voor 51% gewijzigd door crisp op 28-06-2006 22:05 ]

[dixon]

Goed idee, maar hoe doe ik dit? Met ethreal?

In GetImage.aspx.vb doet ie in principe 3 dingen:
- Response.Clear
- Response.ContentType = de ContentType van het plaatje (wat ook in de database word opgeslagen, bijv. image/pjpeg)
- Response.BinairyWrite(objImage) (en uiteraard is objImage = Byte())

[ Voor 4% gewijzigd door dixon op 28-06-2006 22:24 ]

[dixon]

Of in global.asax.vb? Ik ga kijken....

[crisp]

Voor Firefox: http://livehttpheaders.mozdev.org/
en anders http://www.fiddlertool.com/fiddler/ of http://www.ethereal.com/

[dixon]

Ik denk dat ik liveHTTPHeaders ga gebruiken, en anders fiddler. ethreal is erg uitgebreid en voordat ik heb wat ik wil hebben ben ik wel even verder

Bedankt voor je hulp!

[dixon]

Fiddler gebruikt, handige tool. Wat me opvalt is dat cache-control op private staat en no-cache. Dit is ingesteld in IIS en mag ook niet weggehaald worden. Als dat het probleem is (lijkt me goed mogelijk) dan zal ik het toch op een andere manier moeten oplossen, zonder GetImage.aspx.


edit: hmm, bij een static plaatje staat er alleen cache-control: private...
Er staat geen 'cache-control: no-cache', geen 'pragma: no-cache', en geen 'expires: -1'.

[ Voor 24% gewijzigd door dixon op 28-06-2006 22:53 ]

[Borizz]

Je kan in ASP waarschijnlijk de headers zelf aanpassen voor die pagina d.m.v. bepaalde code in je ASP pagina. In PHP gebruik ik daar bijvoorbeeld de functie 'header' voor.

[dixon]

Borizz: Klopt, ik ben aan het kijken wat allemaal kan doen Even debuggen.


edit: ik kom er nu even niet uit. Ik weet ook niet precies wat ik moet veranderen. Morgen weer een dag Bedankt dusver en ik zal morgen weer wat posten!

[ Voor 52% gewijzigd door dixon op 28-06-2006 23:01 ]

[dixon]

Het probleem is opgelost dmv:

code:

                Call Response.Cache.SetExpires(Now.AddSeconds(60))
                Call Response.Cache.SetCacheability(HttpCacheability.Private)

Thnx iedereen voor de hulp!

[Clay]

Als je mouseovers voor buttons met css doet kan je alle states van de button in 1 plaatje stoppen (sprite), en op :hover en :active de background-position aanpassen. Minder html, geen javascript, nix met caching meer te maken; ultiem!

[crisp]

Clay schreef op donderdag 29 juni 2006 @ 13:12:
Als je mouseovers voor buttons met css doet kan je alle states van de button in 1 plaatje stoppen (sprite), en op :hover en :active de background-position aanpassen. Minder html, geen javascript, nix met caching meer te maken; ultiem!

Dan krijg je in IE dus wel te maken met caching-issues: [rml][ CSS/IE] background-image wordt niet gecached[/rml]

[dixon]

Ohja, ik heb iets te vroeg gejuicht, het werkt in Opera, Firefox, en waarschijnlijk elke browser die niet INTERNET EXPLODER heet. Wat een k**browser
Nu moet ik browser detection doen en als het IE is een andere fix doen. Welke weet ik nog niet. Ik ben al op meerdere pc's aan het testen of het aan mn settings ligt van IE, maar volgens mij niet. Volgens mij cached ie die pictures default niet

[dixon]

Goed, 5 computers getest en op alle 5 vertikt IE het om de plaatjes te cachen. Ik ga weer verder met zoeken naar een oplossing speciaal voor de speciale IE browser.. zucht tis ook altijd wat....

[Clay]

crisp schreef op donderdag 29 juni 2006 @ 13:14:
[...]

Dan krijg je in IE dus wel te maken met caching-issues: [rml][ CSS/IE] background-image wordt niet gecached[/rml]

Ja, die ken ik, helaas. Maar da's naar mijn weten alleen als op gepositioneerde dingen in datgene waar je op hovert, b.v. een background afbeelding van een submenu, en niet gewoon op een <a>'tje waar je alleen de background position van verandert oid.

[crisp]

Clay schreef op donderdag 29 juni 2006 @ 14:40:
[...]


Ja, die ken ik, helaas. Maar da's naar mijn weten alleen als op gepositioneerde dingen in datgene waar je op hovert, b.v. een background afbeelding van een submenu, en niet gewoon op een <a>'tje waar je alleen de background position van verandert oid.

Volgens mij speelt dit al als je al enkel de background-position van een achtergrondplaatje aanpast, ik kan het echter nu in IE7 niet reproduceren dus wellicht dat daar toch eea gefixed is. Ik zal toch eens wat testcases daarvoor maken en ook testen in IE6

[dixon]

Beste mensen,

ik ben hier al een tijdje niet mee bezig geweest dus heb ik hier even niets meer gepost. Ik ben er nu weer mee bezig en het probleem bestaat nog steeds. Ik heb in de tussentijd nog dingen geprobeerd die ik met Google heb gevonden, maar dat heeft niet geholpen.

Volgens mij was het eerste antwoord van crips mbt http headers het juiste antwoord. Ik heb namelijk cache op private gezet en het werkt. Tenminste, in alle browsers behalve Internet Explorer. Wie weet hier meer van? IE heeft toch geen problemen met cachen ofzo?

Ik probeer ondertussen nog van alles