Image Pre-Load ?

[Anoniem: 283168]

Ik moet voor mijn stage opdracht een website in elkaar zetten voor een reclame buro, vandaar dat ik al behoorlijk wat vraagjes heb gesteld en dankzei jullie ben ik ook zover als ik nu ben. Zit nu met een nieuw probleem, namelijk het volgende. Als je naar de site gaat (http://www.infymmity.nl/) en met je muis over de links gaat dan verdwijnt hij eerst en dan komt de rollover pas tevoorschijn. Dit is (denk ik) hoogst waarschijnlijk omdat hij pas die image laad wanneer je erover heen gaat. Dit is natuurlijk gewoon spuug lelijk als je dit als bezoeker ziet. Ik vroeg mij af of er een simpele manier is om images te preloaden zodat wanneer de site laad en je over die images gaat je gelijk de rollover te zien krijgt in plaats van dat die hem eerst laad.
Dit is de code die ik nu gebruik, even controleren of dat wel helemaal klopt:

code:

a.homeover
{
    display:block;
    width:118px;
    height:54px;
    text-decoration:none;
    background:url(images/home.png);
}

a.homeover:hover
{
    background:url(images/home_rollover.png);
}

[crisp]

maak van je image een sprite en wijzig de background-position onhover

[Anoniem: 283168]

Zou je dat in iets meer detail kunnen uitleggen?

[zwippie]

Wat crisp bedoelt is dat je beide afbeeldingen onder elkaar in 1 bestand zet (met behulp van paint.net ofzo), en bij een hover dan alleen de background-y positie aanpast. Op die manier heb je niet dat de hover afbeelding apart geladen moet worden, het staat immers allemaal in 1 bestand.

[SinergyX]

Ik zie dat je afbeeldingen links zijn, zou je easy workaround kunnen doen als:

a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }

die manier pre-load hij hover, maar laat hij standaard je a.link image zien.

[Big Womly]

Misschien ben je hier iets mee?

JavaScript:

<SCRIPT LANGUAGE="JavaScript">
image1 = new Image();
image1.src = "image1.gif";

image2 = new Image();
image2.src = "image2.gif";
</script>

Het komt er dus eigenlijk op neer dat je een nieuw Image object aanmaakt en de source property insteld op de afbeelding die je al wil laden, maar nog niet wil weergeven, zodat de image al in je temp inet files staat. Bij een hover zal die dan direct uit de temp dir gehaald worden ipv hem op dat moment pas te gaan downloaden.

[ Voor 72% gewijzigd door Big Womly op 09-10-2009 13:25 ]

[Cartman!]

http://www.alistapart.com/articles/sprites is denk ik de mooiste uitleg van CSS Sprites.

[Spinal]

mbsaerens schreef op vrijdag 09 oktober 2009 @ 13:18:
Misschien ben je hier iets mee?

JavaScript:

<SCRIPT LANGUAGE="JavaScript">
image1 = new Image();
image1.src = "image1.gif";

image2 = new Image();
image2.src = "image2.gif";
</script>

Het komt er dus eigenlijk op neer dat je een nieuw Image object aanmaakt en de source property insteld op de afbeelding die je al wil laden, maar nog niet wil weergeven, zodat de image al in je temp inet files staat. Bij een hover zal die dan direct uit de temp dir gehaald worden ipv hem op dat moment pas te gaan downloaden.

Maar met deze "ouderwetse" manier hebben bezoekers zonder JS geen hover-image. Met css-sprites werkt dat wel

[.oisyn]

Welke idioot heeft die term sprite in de context van CSS eigenlijk verzonnen?

[Neobahamuth]

Jaaaren geleden (lang voor al die CSS) deed ik het zo:
- zet de images die je wil pre-loaden ergens onderaan je pagina met telkens width=1 en height=1.

Zo zijn ze virtueel onzichtbaar en toch reeds geladen wanneer je een mouse-over/hover gaan doen.

[macciez]

Ik geloof, dat de juiste oplossing al is gegeven. Sprites is daar de keurigste oplossing, imo.

[SandaX]

Neobahamuth schreef op vrijdag 09 oktober 2009 @ 14:56:
Jaaaren geleden (lang voor al die CSS) deed ik het zo:
- zet de images die je wil pre-loaden ergens onderaan je pagina met telkens width=1 en height=1.

Zo zijn ze virtueel onzichtbaar en toch reeds geladen wanneer je een mouse-over/hover gaan doen.

Met css kan je er ook een class opzetten met visibility:none, heeft in principe hetzelfde effect maar dan zijn ze helemaal onzichtbaar. (niet helemaal netjes, maar het kan)

[ Voor 3% gewijzigd door SandaX op 09-10-2009 14:59 ]

[cPT.cAPSLOCK]

De oplossing die SandX noemt vind ik zelf ook het handigste:

.preloader {
visibility: none;
}

Dan ergens op je pagina dus <div class="preloader"> plaatjes die je wil preloaden hier </div> en klaar

[Ram0n]

.oisyn schreef op vrijdag 09 oktober 2009 @ 14:51:
Welke idioot heeft die term sprite in de context van CSS eigenlijk verzonnen?

Waarom is dat gek? Een sprite is altijd al een plaatje geweest met daarin subplaatjes, zodat je maar een enkel bestand hoeft in te laden om meerdere dingen weer te geven. Dat was al zo bij de vroegste videogames en het is ook wat het doet in de CSS-context, dus waarom zou het niet kloppen?

[.oisyn]

Ram0n schreef op vrijdag 09 oktober 2009 @ 15:41:
[...]

Waarom is dat gek? Een sprite is altijd al een plaatje geweest met daarin subplaatjes

En dáár gaat het dus fout. Die subplaatjes, dát zijn de sprites. Waar jij het over hebt zijn sprite maps, waar dus meerdere sprites in staan. De topicstarter gebruikt al sprites, alleen heeft ieder plaatje zijn eigen bestand. De suggestie om sprites te gebruiken slaat dus als een lul op een drumstel, want dat doet ie al. De bedoelde suggestie is om alle sprites bij elkaar in een enkele map te zetten, wat dan ineens de term "css sprites" meekrijgt

[ Voor 10% gewijzigd door .oisyn op 09-10-2009 15:49 ]

[BtM909]

.oisyn schreef op vrijdag 09 oktober 2009 @ 15:46:
[...]

En dáár gaat het dus fout. Die subplaatjes, dát zijn de sprites. Waar jij het over hebt zijn sprite maps, waar dus meerdere sprites in staan. De topicstarter gebruikt al sprites, alleen heeft ieder plaatje zijn eigen bestand. De suggestie om sprites te gebruiken slaat dus als een lul op een drumstel, want dat doet ie al. De bedoelde suggestie is om alle sprites bij elkaar in een enkele map te zetten, wat dan ineens de term "css sprites" meekrijgt

Welcome to the interwebs... waar hypes kreten bedenken of kreten hypes

[Ram0n]

Zeg dat dan direct, je reactie liet het zo lijken alsof je vond dat sprites hier helemáál niets mee te maken hebben. Maar je stoort je er dus aan dat de term net iets anders gebruikt wordt. Ja, het is technisch gezien verkeerd, maar iedereen snapt wat ermee bedoelt wordt. Het lijkt me handiger om volgende keer dan direct te zeggen wat het verschil is in plaats van zeggen "dat slaat nergens op" o.i.d.

[.oisyn]

En op die manier een discussie uit de weg te gaan op vrijdagmiddag? Guess again

Maar even serieus, nee, zo zit het niet. Sprites had je altijd al in HTML, gewoon met IMG tags. Ik stoor me aan het feit dat ze het sinds ze de positionering middels CSS "ontdekt" hebben het pas echt sprites noemen.

[ Voor 56% gewijzigd door .oisyn op 09-10-2009 20:50 ]

[crisp]

.oisyn schreef op vrijdag 09 oktober 2009 @ 14:51:
Welke idioot heeft die term sprite in de context van CSS eigenlijk verzonnen?

Volgens mij ben ik daar deels verantwoordelijk voor

[Cartman!]

Als je meerdere images in 1 image prakt dan heb je 1 sprite met meerdere sprites die je laat zien/vebergen mbhv. CSS. Ik zie je probleem niet helemaal, ik kan me er niet druk om maken

@crisp: oohhh...boefje

[Ram0n]

.oisyn schreef op vrijdag 09 oktober 2009 @ 20:44:
En op die manier een discussie uit de weg te gaan op vrijdagmiddag? Guess again

Maar even serieus, nee, zo zit het niet. Sprites had je altijd al in HTML, gewoon met IMG tags. Ik stoor me aan het feit dat ze het sinds ze de positionering middels CSS "ontdekt" hebben het pas echt sprites noemen.

Fair enough, ik begrijp het

[.oisyn]

Cartman! schreef op vrijdag 09 oktober 2009 @ 20:59:
Als je meerdere images in 1 image prakt dan heb je 1 sprite

dat is dus niet een sprite, dat is een sprite map. That's the whole point. Als je dat ding een sprite gaat noemen dan veroorzaak je alleen maar verwarring (behalve in de web community dan, want die hebben dat allemaal maar gewoon overgenomen )

[Grote Schurk]

Idd gewoon sprites gebruiken, waarom?

Voordelen:
- Je hoeft maar één afbeelding te laden, dat maakt het laden dus sneller omdat je dan maar één http request hebt (zie dat als access time bij een hdd)
- Je hoeft maar één afbeelding te onderhouden
- Vooral bij gif (maar ook andere extensies) heb je het voordeel dat die ene afbeelding veel kleiner in bestandsgrootte is dan meerdere afbeeldingen bij elkaar
- Geen pre-load problemen in Internet Explorer
- Geen troep in je html (zoals JS of onnodige html op visibility: none;)

Dat laatste punt is natuurlijk erg fijn voor front-enders die na jou bezig zijn met de html: "WTF is dit, wat doet het??". Natuurlijk kan je er een comment bij zetten, maar het blijven naar mijn mening vieze praktijken.

Als je er enthousiast over bent kan je ook de rest van de site op deze manier doen. Dan kan je gebruik maken van horizontale en verticale sprites met het oog op repeat-x of repeat-y. Het maakt behoorlijk wat uit in de snelheid van het laden van een pagina.

[Cartman!]

.oisyn schreef op zaterdag 10 oktober 2009 @ 14:30:
[...]

dat is dus niet een sprite, dat is een sprite map. That's the whole point. Als je dat ding een sprite gaat noemen dan veroorzaak je alleen maar verwarring (behalve in de web community dan, want die hebben dat allemaal maar gewoon overgenomen )

Je hebt me overtuigd Spritemap klinkt wel vetter nog... CSS Spritemaps/CSS Spritemappen, ik doe mee

[moozzuzz]

FritsYpeij schreef op zaterdag 10 oktober 2009 @ 14:57:
Idd gewoon sprites gebruiken, waarom?

Voordelen:
- Je hoeft maar één afbeelding te laden, dat maakt het laden dus sneller omdat je dan maar één http request hebt (zie dat als access time bij een hdd)

Hoeveel kost één HTTP-request eigenlijk? OK, het is *een voordeel*, maar om het meteen als eerste voordeel te poneren?

Nadelen
- Je hoeft maar één afbeelding te onderhouden + je CSS-*image-map* (als in: je moet het in één plaatje proppen)
- Je hangt veelal vast aan werken in pixels (backgrounds rekken niet mee met font-grootte-instellingen van de bezoeker)

offtopic:
En op die manier een discussie uit de weg te gaan op vrijdag maandagmiddag? Guess again

[Caelorum]

moozzuzz schreef op maandag 12 oktober 2009 @ 13:44:
[...]

Hoeveel kost één HTTP-request eigenlijk? OK, het is *een voordeel*, maar om het meteen als eerste voordeel te poneren?

als je een hoge latency hebt (500ms+) dan wordt het echt eenr amp als de site 20 images probeert in te laden en voor elke image een aparte request moet doen..
Dan kan je ze echt zien laden stuk voor stuk

[Sebazztiaan]

geef die jongen nou gewoon zijn stukje code

kleine uitleg, de volgende 'afbeelding' zijn 2 afbeeldingen in 1 png. J = niet selected state en K = hover state. We gaan er van uit dat de afbeelding 50x50px is. Dus de afbeelding is 50 breed bij 100 hoog en in deze config:

J
K

HTML:

<ul>
  <li><a href='...' class='home'>HOME</a>
  ...
</ul>

en dan nu de css

Cascading Stylesheet:

.home {
  background-image:url(sprite.jpg);
  background-position:0px 0px;
  height:50px;
  width:50px;
  display:block;
  text-indent:-9999px;
  overflow:hidden;
}

.home:hover {
  background-position:0px -50px;
}

De uitleg:

Hoogte en breedte 50px. Text-indent -9999px zorgt ervoor dat je link navigeerbaar is zonder CSS terwijl je hem niet ziet. De overflow:hidden zorgt ervoor dat je de lelijke selectielijntjes niet meer ziet.

Als je hovert, verplaats je de offset waar de bg-img begint 50px omhoog (dus 50px te hoog, waardoor je 2e deel (het K) stuk zichtbaar wordt.

[Sebazztiaan]

cPT.cAPSLOCK schreef op vrijdag 09 oktober 2009 @ 15:02:
De oplossing die SandX noemt vind ik zelf ook het handigste:

.preloader {
visibility: none;
}

Dan ergens op je pagina dus <div class="preloader"> plaatjes die je wil preloaden hier </div> en klaar

Dit is dus semantisch ruk...