[CSS] Images preloaden in stylesheet?

[Glival]

Kan ik de background-images die ik in een stylesheet gebruik preloaden? Voorbeeld:

code:

<style>
.class1 {
    color: blue;
    background-image: url(blauw_plaatje.gif);
}

.class2 {
    color: red;
    background-image: url(rood_plaatje.gif);
}
</style>

In de HTML-source verander ik in de onMouseOver van een <td>-element de class van class1 naar class2, en in de onMouseOut andersom. Werkt prima, maar iedere keer dat 'ie de plaatjes gaat wisselen, worden ze van de server gehaald Ik wil ze dus preloaden, maar ik wil ze wel in de stylesheet houden; de namen van de plaatjes moeten kunnen worden aangepast door alleen de stylesheet aan te passen. Kan dat?

[Woudloper]

Kan je ze niet gewoon preloaden met behulp van JavaScript bij het openen van de pagina??

Met andere woorden. Dan zitten ze dus al in de cache van de browser en gaat het laden erg snel...

Wat ook nog zo kan zijn is dat het gebruik van CSS de boel een beetje vertraagd. In een eerder topic (vorige week geloof ik) had één van de MOD's geschreven dat dat o.a. een oorzaak kon zijn...

[Glival]

Woudloper schreef op 07 oktober 2002 @ 13:29:
Kan je ze niet gewoon preloaden met behulp van JavaScript bij het openen van de pagina??

Met andere woorden. Dan zitten ze dus al in de cache van de browser en gaat het laden erg snel...

Wat ook nog zo kan zijn is dat het gebruik van CSS de boel een beetje vertraagd. In een eerder topic (vorige week geloof ik) had één van de MOD's geschreven dat dat o.a. een oorzaak kon zijn...

Bij het openen van de pagina preloaden werkt niet..
Bij het wisselen van een plaatje wordt het gedeelte waar het 'oude' plaatje stond even wit, dan staat er in de statusbar iets als "downloading image from <url>", en daarna zie je pas het nieuwe plaatje. Misschien moet ik op de server iets instellen waardoor de browser de plaatjes cached ofzo?

Het is idd een beetje traag met CSS, maar dat is volgens mij niet de oorzaak van dit probleem.

[Dr_Frickin_Evil]

hoezo kun je niet preloaden? Als je toch gewoon beide plaatjes via een javascriptje dat je in je body-tag aanroept preload, dan moet het toch werken??

[Hangloozz]

nee dat werkt volgens mij niet omdat je in je CSS verwijst naar een URL en niet naar het gepreloadde object in je javascript...

Misschien dat je met javascript kunt preloaden en vanuit je script de class aan kunt spreken maar dan krijg je juist de vertraging waar Woudloper naar refereerde.
Een workaround is om het via backgroundImage te doen maar dan ben je dus alsnog volledig in javascript bezig..

Ik denk dus dat én preloaden én met CSS niet kan

[Verwijderd]

Hangloozz schreef op 07 oktober 2002 @ 16:03:
nee dat werkt volgens mij niet omdat je in je CSS verwijst naar een URL en niet naar het gepreloadde object in je javascript...

Dat is theoretisch niet nodig. Als je in JS een image offscreen cached in een Image() object, zal de browser als het goed is de URL van dat plaatje proberen te matchen op plaatjes die ingeladen moeten worden. Als de URL matcht gebruikt ie het plaatje uit de cache

Glival: heb je al geprobeerd om altijd alle nodige classes alvast toe te passen op onzichtbare elementen? Zo moet ie al van tevoren de plaatjes inladen. Dus:

code:

<div class="class1" style="display:none;">CLASS1</div>
<div class="class2" style="display:none;">CLASS2</div>

[Verwijderd]

Wat Blues zei, dat is inderdaad een handige manier om de plaatjes te 'precachen'. Maar in principe haalt hij dan nog altijd zogenaamd het plaatje uit de desbetreffende url. En dat is wat je (heel even) ziet in de statusbalk. Normaal moet dat geen probleem zijn.

Maar je zou ook een absoluut gepositioneerde div met 100% width en height als child van die td erin kunnen gooien en met display:none;left:0px;top:0px;z-index:1;

td class1 met z-index:2; background-image:url(image1.jpg)

Zet er dan als stijlregel bij:
.class2 div{display:block;}

Zoiets zou dan moeten werken om zonder 'laden' het achtergrondplaatje te veranderen. 'k heb het niet uitgetest hoor. En je vervuild je html-code wel met extra tags.
Je zou dat ook weer kunnen oplossen via een scriptje

[edie]

Glival schreef op 07 oktober 2002 @ 12:20:
Kan ik de background-images die ik in een stylesheet gebruik preloaden? Voorbeeld:

code:

<style>
.class1 {
    color: blue;
    background-image: url(blauw_plaatje.gif);
}

.class2 {
    color: red;
    background-image: url(rood_plaatje.gif);
}
</style>

Je kan toch ook doen:

code:

<style type="text/css">
.class1 {
    color: blue;
    background-image: url('blauw_plaatje.gif');
}

.class1:hover {
    color: red;
    background-image: url('rood_plaatje.gif');
}
</style>

Zou iig moeten werken in Mozilla...

En dat pre-loaden... tja... Volgens mij moet de browser gewoon blauw_plaatje.gif laden en in zijn cache laten. Als je dan met er muis over de TD gaat, moet hij rood_plaatjes.gif laden en in zijn cache laden. De volgende keer hoeft hij dan niet meer te laden.
IMO

[Hangloozz]

eddie19 schreef op 07 oktober 2002 @ 20:02:
[...]

Je kan toch ook doen:

*snip*

Zou iig moeten werken in Mozilla...

En dat pre-loaden... tja... Volgens mij moet de browser gewoon blauw_plaatje.gif laden en in zijn cache laten. Als je dan met er muis over de TD gaat, moet hij rood_plaatjes.gif laden en in zijn cache laden. De volgende keer hoeft hij dan niet meer te laden.
IMO

ff nieuwsgierig; wat is het wezenlijke verschil? behalve quotes en een style-type definitie.

En tsja, wat je zegt over die plaatjes is waar, maar zo werkt het in de praktijk niet, althans, niet betrouwbaar genoeg.
IMO kun je toch beter een gegarandeerde preloading aanleggen.

[Woudloper]

Hangloozz schreef op 07 oktober 2002 @ 22:44:ff nieuwsgierig; wat is het wezenlijke verschil? behalve quotes en een style-type definitie.

Zie je dat niet Er wordt namelijk in die suggestie gewerkt met hover. Wellicht over heen gelezen??

_{Zo laat was het toch nog niet??}

[Verwijderd]

Woudloper schreef op 08 oktober 2002 @ 07:58:
[...]

Zie je dat niet Er wordt namelijk in die suggestie gewerkt met hover. Wellicht over heen gelezen??

_{Zo laat was het toch nog niet??}

Dat lijkt me overigens niet echt een optie, dit pseudo-element toegepast op iets anders dan hyperlinks lijkt op het moment wel een MOZ-only feature te zijn

[Woudloper]

Ook kan je natuurlijk nog gebruik maken van een hidden layer (ofwel div) waarin je alle images preload...

edit:
Met andere woorden dus dezelfde oplossing als Blues al had aangedragen...

[Hangloozz]

Woudloper schreef op 08 oktober 2002 @ 07:58:
[...]

Zie je dat niet Er wordt namelijk in die suggestie gewerkt met hover. Wellicht over heen gelezen??

_{Zo laat was het toch nog niet??}

yep, overheen gelezen

Vandaar dat ik ook vroeg wat het wezenlijke verschil was want ik zag 2 dezelfde blokken..niet dus.

[Glival]

Verwijderd schreef op 07 oktober 2002 @ 17:24:
[...]

Dat is theoretisch niet nodig. Als je in JS een image offscreen cached in een Image() object, zal de browser als het goed is de URL van dat plaatje proberen te matchen op plaatjes die ingeladen moeten worden. Als de URL matcht gebruikt ie het plaatje uit de cache

Glival: heb je al geprobeerd om altijd alle nodige classes alvast toe te passen op onzichtbare elementen? Zo moet ie al van tevoren de plaatjes inladen. Dus:

code:

<div class="class1" style="display:none;">CLASS1</div>
<div class="class2" style="display:none;">CLASS2</div>

Images preloaden in JS werkt niet; kan dat aan de server liggen? Misschien moet ik daar iets met expiration-date of cache instellen ofzo?

Die invisible divs werkt ook niet...

Ik laat het maar gewoon zo, dan maar geen vloeiende overgang bij een slechte/langzame verbinding.

Bedankt voor alle reacties

[Verwijderd]

Je kan wellicht de images ook preloaden in een verborgen frame:

code:

<frameset cols="100%,*">
<frame name="mijnpagina" src="jouwpagina.html">
<frame name="stiekemerd" src="stiekemepagina.html">
</frameset>

En dan plemp je alle images in stiekemepagina.html, dan zijn ze ook 'preloaded'.

[Not Pingu]

een andere mogelijkheid is gewoon zorgen dat de plaatjes voor de Mouseover state niet al te groot zijn, zodat ze snel ingeladen zijn.
Een probleem wat je toch houdt is dat de plaatjes hoe dan ook ingeladen zullen worden. Dus ook als je de pagina net oproept en je gaat met de muis op de desbetreffende <TD> staan, dan bestaat de kans dat het mousover plaatje nog niet geheel ingeladen is. in dat geval zal ie ook niet getoond worden.

Ik heb met hetzelfde probleem geworsteld voor mijn eigen site, en heb het opgelost door toch gebruik te maken van JavaScript, ook voor het herdefinieren van de SRC van de plaatjes.

ziehier het script waarmee ik de images als objects aanmaak en dus preload (dat kost tijd any which way je het doet dus ze zullen nooit 1 milliseconde na load al geladen zijn):

code:

function preloadimg()
{
    homelite = new Image();
    homelite.src = "./img/btn_homelite.jpg";
    homeunlite = new Image();
    homeunlite.src = "./img/btn_home.jpg";
}

wat dit doet: het maakt eerst image objects aan en geeft die een source property (dit gebeurt voor zowel de lite (mouseover) als unlite (mouseout) state).

daarna volgt dit script om de buttons te lighten, danwel unlighten.

code:

function btnlite(btnname)
{
    document.images[btnname].src = eval(btnname+"lite.src");
}

function btnunlite(btnname)
{
    document.images[btnname].src = eval(btnname+"unlite.src");
}

als laatste een voorbeeldje van de implementatie van deze scripts:

code:

<A onmouseover="btnlite('home'); 
dispdescrip('homedescrip');" onmouseout="btnunlite('home');"
 HREF="frontpage.html" TARGET="main"> 

[img]"./img/btn_home.jpg"[/img] 

</A>

sorry voor de lap tekst, daardoor lijkt het net of het heel wat voorstelt terwijl het eigenlijk heel simpel is.
* Not Pingu keeps a low profile

[crisp]

Wat ik meestal doe is mijn dynamische content pas zichtbaar maken op het moment dat de site geheel geladen is. De plaatjes zet ik dan meestal ook allemaal al in een hidden div.

[edie]

Verwijderd schreef op 08 oktober 2002 @ 08:11:
[...]

Dat lijkt me overigens niet echt een optie, dit pseudo-element toegepast op iets anders dan hyperlinks lijkt op het moment wel een MOZ-only feature te zijn

Vreemd genoeg ondersteund IE 6 het bij mij...