Helemaal eens met Goeroeboeroe, dat de "iframe-oplossing" liefst niet gebruikt moet worden; ik had 'm erbij verzonnen als uiterste noodmaatregel ingeval alle andere dingen niet werkten.
Als ik het wel heb, is Goeroeboeroe's "CSS prefetching" hetzelfde als wat ik probeerde te zeggen met:
Misschien kunnen ook alleen de plaatjes binnengehaald worden via een aangepast php-script.
en wat Pieter53 zegt:
Waarschijnlijk zal ik er voor kiezen alvast alleen de volgende afbeelding, in de huidige pagina, te laden en deze dan in een 'hidden div' te plaatsen.
Dan bedoelen we hetzelfde.
Oftewel (aan het eind van de pagina, als alles aan tekst en plaatjes en achtergrondplaatjes van de gewone pagina al is binnengehaald):
HTML:
<div id="preloadImages">
<img src="path/path/path/volgende.img" alt="">
<img src="path/path/path/vorige.img" alt="">
</div>
</body>
</html>
(Ik zou de vorige er ook bij doen, voor bezoekers die middenin een album terechtkomen via Googel of zo). Als de pagina compleet met php gegenereerd wordt, zou dan eveneens met php het pad en de naam van het volgende.img en het vorige.img er in gezet kunnen worden (via de database die alles weet).
In de css kan het dan worden:
Code:
#preloadImages {
position: absolute; top: 0; left: 0; margin-left: -9999px;
}
of zoiets om ze buiten boord van het beeldscherm te hangen.
Ik zag trouwens in de Google-resultaten ook een #preloader met het plaatsen van de plaatjes als background-img, maar dat heeft het nadeel dat je het pad en de naam van de plaatjes in de css moet zetten (en dan waarschijnlijk ook nog dynamisch met php). Het zijn er te veel om ze allemaal in één stylesheet op te nemen, dan zou je ze in een <style></style> in de <head> moeten opnemen. Maar hoe dan ook worden ze dan gepreload voordat de rest van de pagina aan bod komt, en dat vertraagt net zo hard > geen oplossing, lijkt me.
Dan het "verspringen" van de plaatjes in Firefox. Ik heb daar in FF geen last mee, maar wel in Internet Explorer. Daar komt even een flits met niets (d.w.z. alleen de groen-grijze achtergrondkleur van de pagina) op de plaats van het oude plaatje, en dan pas de nieuwe foto.
Volgens mij is dat de FOUC (Flash Of Unstyled Content) eigenaardigheid van Internet Explorer. Zie de
EN Wikipedia, en het originele
Bluerobot-artikel.
Om dit effect te verzachten pas ik niet de Bluerobot-ideeën toe, maar de in IE ingebouwde mogelijkheid om pagina-overgang effecten te laten zien. Natuurlijk weer een IE-only feature, maar in dit geval wel handig:
HTML:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.75)"><!-- anti IE "fouc" -->
Dit veroorzaakt voor IE een uit- en infade-effect, dat net lang genoeg duurt om de FOUC-flits te beletten (het uitfaden begint als de nieuwe pagina opgeroepen wordt, die dan even de tijd heeft om zich te settelen).
Met de (Duration=.75) kan gespeeld worden om de lengte van zo'n "softe overgang" aan te passen. Meer info
bij de familie Microsoft zelf.
- Dit effect is bv. hier te zien: in FF is de volgende pagina uit het menu acuut ter plekke, in IE komen de opmaak / teksten en plaatjes er bij een pagina-wissel vanaf transparant ingloeien.
En een geluk: deze <meta> oplossing zien andere browsers als overtollige informatie (ze kunnen er niets mee en doen er dus niets mee), en is volledig html-valid. Geen Conditional Comment nodig, en allemaal blij!
Met vriendelijke groet,
CSShunter
PS1: Was ook even de deur uit, Goeroeboeroe, maar op tijd alweer terug!
PS2: Wel benieuwd naar wat je in de code hebt gezien dat verspringen kan veroorzaken.
