Hoi trulier,
Als ik mij niet sterk vergis doet het witte-flits verschijnsel zich alleen voor in Internet Explorer, en niet in de andere browsers. Dit wordt een "FOUC" genoemd: een
Flash
Of
Unstyled
Content.
Hoe zit dat? Alle andere browsers laten een webpagina op scherm staan, zolang een nieuwe pagina aangemaakt wordt (= downloaden ingrediënten van de webpagina en renderen van de layout op basis van de aangetroffen resolutie enz. van de bezoeker). Bij een paginawissel staat de nieuwe pagina er dan in één klap op, en geen centje pijn.
Zo niet Internet Explorer. Die begint met het wissen van de oude pagina, bouwt dan de nieuwe op, en toont 'm dan pas. Afhankelijk van de grootte van wat er binnengehaald moet worden (de pagina-html, de images en css en javascripts; voorzover al niet gedownload bij eerdere pagina's) is er minder of meer tijd nodig. In die tijd staat er "niets aan styles" op het scherm: de Unstyled Content. En die begint bij de achtergrondkleur van de pagina: als die niet wit is (en bij jou is ie niet wit) wordt tijdelijk de default-achtergrondkleur getoond: wit. Dat is dus de flits.
Op zich heeft het dus niet zo met het <iframe> te maken, maar dan valt het wel extra op (omdat de omgeving wel de goede achtergrondkleur blijft houden).
Zo kom je er aan, maar hoe kom je er af?
EHBO
- In de css van de iframe-pagina www.laotkieke.nl/trainen1.htm opnemen:
body { background-color: #B1AE8B; }.
- In de <head> van dezelfde pagina opnemen:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.75)">.
Dit is een pagina-overgang die alleen in IE werkt (en voor de rest geen kwaad doet), waardoor de oude pagina nog even blijft staan zolang de overgang duurt. Met de "Duration" (in seconden) kan je wat spelen om te kijken hoe lang het moet duren).
Deze twee EHBO-maatregelen werken in elk geval bij gewone pagina's. Of dit ook het geval is bij je iframe, weet ik niet zeker; maar probeer maar eens.
De echte oplossing moet gevonden worden in:
De pagina saneren en de pagina-snelheid opvoeren
Om te beginnen moet je kijken of er iets aan de "pagina-zwaarte" gedaan kan worden: de grootte van alle pagina-onderdelen in KB's verkleinen.
- Er zit in de <iframe>-pagina: 18KB aan html (inclusief inwendig css en inwendig javascript), en 351KB aan images (background: 7KB, tracklog: 165KB; trainen1a: 101KB, trainen2: 78KB). Samen: 370KB. Dit is alleen voor het <iframe>.
- Maar de rest van de pagina is niet een standaard-raamwerk waarbinnen voor elke gewone pagina een <iframe> wordt opgeroepen, maar óók een eigen pagina. D.w.z.: een pagina van 10KB met een eigen background-afbeelding van ... 150KB.
- In totaal moet er dus gedownload worden: 370+160 = 530KB. Dat is pittig!
- En: het totaal aantal te downloaden objecten op de pagina (incl. de <iframe>-pagina) is: 16 stuks. Die objecten moeten elk apart opgevraagd worden bij de server (= aanvraag-verzoek uploaden van de bezoeker naar de server = veel langzamer dan downloaden!). Het Web Page Speed Report (klik) waarschuwt hierbij: "From 12 to 20 objects per page, the latency due to object overhead makes up from 75% to 80% of the delay of the average web page." Oftewel: 75% tot 80% van de vertraging van de pagina zit in de overhead bij het opvragen van al die objecten. Met terugbrengen van het aantal objecten kan je dus enorme snelheidswinst boeken!
O.k., hoe doen we dat?
We gaan er een mooie kleine pagina van maken. - Wordt vervolgd!
Met vriendelijke groet,
CSShunter