preloading images met css (zonder js script)

Info 
Door: putbruy Moeilijkheidsgraad: 1/3
Views:11.947Reacties: 5(Bekijken)
  Log in om zelf te reageren
 Waardering:5.3/10 (3 stemmen)



Wanneer je bv. met navigatie afbeeldingen werkt,wil het al eens voorkomen dat het laden van een rollover image even hapert, wat niet zo mooi/professioneel overkomt.
Dit is op te lossen door bv. een preload images javascript te gebruiken, maar nog veel invoudiger d.m.v. een preload DIV

#Code
1
#preload { display: none; z-index:-10; }


display none zorgt voor de onzichtbaarheid, de z-index is een optioneel extraatje (zorgt ervoor dat de layer zeker onderin staat)

In je body zet je dan onderaan de echte code:

#Code
1
<div id="preload"><img src="rollover1.gif" alt=""><img src="rollover2.gif" alt=""></div></body>

dit zorgt ervoor dat de rollover images (of andere) onmiddelijk in de browser geladen worden,zodat ze zonder extra laadtijd worden weergegeven

5 reacties
mahmoud Geplaatst op 12-04-2010 om 18:32
 

Regular
hoe moet je het downloaden?
indianajames Geplaatst op 12-11-2007 om 10:37
Avatar van indianajames

Moderator
ja, daar is wel iets van waar, maar waarom moet je 'second page images' preloaden? Doe dat gewoon in de pagina zelf, dat maakt het geheel minder complex. Headers moet je niet preloaden. Preloaden is eigenlijk enkel interessant voor roll-over gebieden, zoals logo 's en menu 's.

En mijn methode werkt wel met background-repeat, maar dan ofwel enkel verticaal ofwel enkel horizontaal. En als je goed slicet, dan heb je niet meer nodig.

Dus je methode werkt wel, maar de extra markup vind ik niet echt 'proper'.
putbruy Geplaatst op 11-11-2007 om 14:50
 

Regular
dat klopt,alleen is het toepassingsgebied veel uitgebreider met deze methode (secondpage images,headers backgrounds enz.) en imagelinks die met een background-repeat werken
Een andere verbergcode is bv. #preload {
position: absolute;
left: -9999px;
top: -9999px;
}
indianajames Geplaatst op 09-11-2007 om 23:34
Avatar van indianajames

Moderator
Je kan ook 'preloaden' in CSS zonder extra HTML. Je gebruikt voor je image-link een vaste hoogte, bv. 25px. Je achtergrond-afbeelding maak je 50px hoog, waarvan de bovenste help getoond wordt in standaard toestand. De onderste help gebruik je bij roll-over.
Dit kan je door gebruik van de CSS eigenschap background-position!
Peck Geplaatst op 09-11-2007 om 19:53
 

Moderator
Ik vind 'm wel goed, maar is eerder een Nice2Know, niet?

Pagina 1 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder