Tvinga en browser att cacha bilder på websida innan de används?

Permalänk
Medlem

Tvinga en browser att cacha bilder på websida innan de används?

http://www.rentidag.se

I den nuvarande menyn finns tre .pngs för varje knapp, en inaktiv, en aktiv och en markerad (hover) knapp och dessa laddas inte förrän man hovrar eller klickar på en av länkarna och designen ser konstig ut i någon sekund, lär märkas mer på en långsam uppkoppling. Går det att tvinga browsern att cacha alla dessa bilder direkt när sidan laddas för att kringgå problemet?

Visa signatur

Asus B550F - 5900X - TUF3080OC - 32 GB 3600 MHz - NH-D15 - Define S - LG 27GL850 - LG OLED55CX
PlayStation 5 - Nintendo Switch - Wii U - RPi3
a silent computer is a glorious computer

Permalänk
Medlem

Vet att jQuery kan göra detta, går säkert på andra sätt också. Exempelvis lägger du alla bilder du vill ladda in i en div på botten, och sen sätter du visibility till none.

http://stackoverflow.com/questions/476679/preloading-images-w...

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Permalänk
Inaktiv

Tänker ge dig lite andra tips även om det inte handlar om cachen.
Just nu använder du dig av Javascript för att byta bilderna vilket är väldigt oeffektivt. Ta och titta på CSS psuedo klassen :hover.
Du kan då göra så att bilden bytas väldigt enkelt med bara CSS. Sedan kan du ju skapa en "aktiv" klass som används för att byta bild på den sidan man är inne på nu.

För att sedan dra ner på HTTP requestsen (som också gör att det går väldigt mycket saktare) kan du ta en titt på CSS-sprites, där har du alla tre bilderna i en PNG fil och du byter sedan bilden men hjälp av background-position.

Permalänk
Medlem

CSS-sprites är verkligen vägen att ta i ert fall. Lägg bilden som bakgrundsbild istället och skriv ut texten i klartext för menyn så att den blir sökbar (ur SEO-perspektiv och användarvänlighet är det det mest rätta).
Kika tex in den här: http://buildinternet.com/2010/01/how-to-make-a-css-sprite-pow...
alternativt den här för lite mer interaktion: http://www.alistapart.com/articles/sprites2/

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com