Flash of unstyled content, FOUC

Status
Niet open voor verdere reacties.
J

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
hallo, op een website die ik onlangs maakte met artisteer heb ik , zoals wel vaker trouwens als ik dit programma gebruik, last van FOUC: Flash of unstyled content. althans, ik wijt het geflikker tussen het schakelen van paginas maar hieraan.
volgens mij komt het door het immense css-bestand dat artisteer genereert. ik zie een css van hier tot tokyo, terwijl het echt maar een simpele site is.
is er geen truc om
- fouc te voorkomen
- of anders: op een of andere manier alle css die ik niet gebruik ook niet mee te nemen. ja, zal iemand zeggen: bouw die site zelf dan heb je daar geen last van. klopt, maar dat heb ik nu niet gedaan dus, en de vraag rest dan of er zo'n truc bestaat. zal wel niet, maar je weet het maar nooit.

ps de site waar ik over sprak: www.bezieldehints.nl
 
Hoi Jeel,
Inderdaad een reis van hier tot Tokio om door de bezielde-css heen te komen: een lap van zo'n 28kB.
Maar de site heeft met dank aan artisteer ook behoorlijk last van divitis, dus het zal niet makkelijk (cq. onmogelijk) zijn om lekker in de css te gaan snijden zonder ook de html te moeten herbouwen.
Die optie zie ik dus niet gauw in vervulling gaan.

De andere optie is de FOUC zien kwijt te raken, Ik neem aan dat je daarmee alleen IE bedoelt? Want met andere browsers heb ik er geen last van *), en IE is voor zover ik weet de enige FOUC-gerechtigde.
  1. Wat ik zeker zou doen, is de {background-color:#304050;} er uit halen, want dat is deze kleur, die bijna 100% in contrast staat met het zeer lichte pagina-background-image:

    kleur304050.png

    kleur #304050​

    Bij een pagina-wissel is dat de bg-color die zichtbaar is terwijl IE nog driftig aan het renderen van de css bezig is. Zonder die donkerte wordt het een witte bg, en die valt veel minder op = minder flits-gewaarwording!

  2. Verder heb ik onlangs ook een reis gemaakt, en in het Reisverslag uit Cascade-land staat op pagina 64 de truc om van een IE-FOUC af te komen. Je moet misschien wat schoffelen met de "duration", maar succes verzekerd. :)
Met vriendelijke groet,
CSShunter
___________
*) Alleen de eerste keer bij het vers openen van de pagina is er soms even iets flitserigs bij andere browsers waar te nemen, daarna bij het wisselen van pagina;s niet meer.
 
Laatst bewerkt:
to fouc or not to fouc

hallo csshunter
blikskaters! het werkt volgens mij.
heb de achtergrond weggehaald, dat moest ik idd nog doen , en daarna de metatag erin gezet. in IE9, wat ik heb, zie ik m bijna niet meer. alleen de achtergrond , het blad aan de linkerkant, zie ik nog even wegspringen.

de andere browsers hadden het ook, maar niet zo erg (Firefox, google chrome). Daar lijkt het nu helemaal verdwenen. alleen de overgang van Afspraak naar Nieuws, daar was het fouceffect dan weer niet of minder voorheen. misschien omdat Nieuws zo weinig content had?

de enige die het uberhaupt niet had was Opera, maar dat is sowieso mn favoriete browser. jammer dat de menschheid er nog niet massaal op is overgestapt.

nu ik je toch 'spreek' : de indexpagina, het 'filmpje', is een javascript van 3 kilometer lang.
was flash hier handiger geweest? (qua grootte). of kan dat zelfs met css, een tijdspanne inbouwen? dus eens stijl maken die zegt: plaatje 1: laat je 3 tellen zien.
plaatje 2: laat jij je daarna 3 tellen zien?
ik weet het, is het dan wel geen opmaakstijl, maar toch een beetje. het kader waarin het plaatje zich toont, dat wordt min of meer opgemaakt. of zwets ik uit mijn nek?
 
Laatst bewerkt:
FOUC en de stand van de maan

Hoi Jeel,
Dat de Nieuws-pagina klein is,zou 'm alleen maar minder fouc moeten geven, zou je zeggen.
Ik denk dat het de stand van de maan is die daar parten speelt. ;)
  • Daarvoor wordt extern bij moonmodule.com een javascript opgehaald, wat volgens de Safari-ontwikkelconsole zo'n 1/3 sec. duurt.
  • Via dat script moet ook een Flash (flits!) bestand opgehaald worden bij mm.com, en die swf binnenhalen zou ca. 650ms kosten.
  • Wisselen van Afspraak naar Nieuws geeft in IE7 de tweede keer (als die bestanden binnen zijn) nog nauwelijks een foucje. Dat bevestigt de zaak.
Wat te doen?
  • Je zou de duration van de IE-meta voor de Nieuws-pagina kunnen opschroeven.
    Test: via FOUC-afspraak naar FOUC-Nieuws gaan, waar ik de duration op .35 heb gezet.
  • De <meta> met de charset altijd meteen na de <head> zetten, want die geeft aan hoe alle volgende lettertekens door de browser geïnterpreteerd moeten worden (en daarna meteen de fouc-meta, want die moet ook hoog staan om goed te kunnen werken).
  • Even de html-errors wegwerken, kan ook nooit kwaad.
  • Je zou misschien het www.moonmodule.com/cs/ccm_fl.js kunnen downloaden en bij jou op de server zetten (ik weet niet of ie dan nog werkt); misschien doet die het sneller dan extern aftappen. - De swf is dynamisch, daar zal het niet mee lukken.
  • In het voorbijgaan even de lang="en-US" en de xml:lang="en" in de <html> tag allebei op "nl" zetten (anders gaat een voorleesbrowser proberen de NL teksten op z'n EN uit te spreken, wat wel komisch zal klinken).
  • Om voor het nut van het algemeen de paginasnelheid te verbeteren, kunnen via smush.it de images geoptimaliseerd worden (zonder kwaliteitsverlies), wat voor de Nieuws-pagina een 25% kleinere img-bestandsgrootte oplevert (samen 60kB minder). Dat is dan wel voor de 1e keer openen van de site, daarna zijn ze al aan boord, maar alle beetjes helpen.
Over de 3km js van de index-pagina:

Wordt vervolgd!
CSShunter
 
hallo csshunter

nee! dit berust op een mega-misverstand. ik bedoelde dat Nieuws de enige pagina was waar alles juist GOED ging!
itt de rest. Nu echter gaat ALLES goed.
(ik had het alleen een beetje krom opgeschreven: 'alleen de overgang van Afspraak naar Nieuws, daar was het fouceffect dan weer niet of minder voorheen.')
had mn mond moeten houden.
desondanks zijn je tips immer waardevol!
dus alweder bedankt uiteraard!
 
De fadende optocht: van 1250 kB naar 100kB

Hoi jeel,
Zichzelf ophelderende misverstanden doen een mens alleen maar goed! ;)

Intussen heb ik me uitstekend vermaakt met je andere vraag:
De indexpagina, het 'filmpje', is een javascript van 3 kilometer lang. Was flash hier handiger geweest? (qua grootte). Of kan dat zelfs met css, een tijdspanne inbouwen? Dus eens stijl maken die zegt: plaatje 1: laat je 3 tellen zien; plaatje 2: laat jij je daarna 3 tellen zien?
Ik weet het, is het dan wel geen opmaakstijl, maar toch een beetje. het kader waarin het plaatje zich toont, dat wordt min of meer opgemaakt. Of zwets ik uit mijn nek?
Klik om te vergroten...
  • Geen idee of Flash een kleinere bestandsgrootte zou maken, ik werk nooit met Flash. Maar handiger? Nee, je moet je in 1000 bochten wringen om een Flash-pagina voor Google bruikbaar te maken. En de bezoeker is Flash-afhankelijk voor de link om binnen te komen. Wie geen Flash geeft geinstalleerd of aan heeft staan (of wie een browser gebruikt die geen Flash ondersteunt: pure text-browsers, voorlees-browsers e.d.): die blijft buiten. :confused:

  • Met css een tijdspanne inbouwen: nee dat kan niet. Het verschijnsel "tijd" is een functie (vanaf het moment dat de pagina opengaat, of vanaf het moment dat je als bezoeker een handeling uitvoert). Dat is dus geen opmaak meer, dat is functionaliteit: en dat gaat niet met css; wel met javascript. Dat een opmaak in de loop van de tijd verandert, is geen eigenschap van de opmaak, maar van iets heel anders: een functie die de opmaak aanpast, script dus!
  • Nu is op de keper beschouwd ook een hover-verandering (met css) een functionaliteit (die zal vooral uit praktische overwegingen ingevoerd zijn: met allemaal mouseover's en mouseóut's, plus het bijbehorende preloaden van images, krijg je een puur onhandige en overvolle html-code), en er zijn wellicht nog wat grensgevallen.
Maar in het algemeen hoort er een strikte driedeling te zijn:
  1. html voor de structuur en de inhoud,
  2. css voor de opmaak, en
  3. scripts (js, php enz,.) voor de functionaliteit.
=====

Nu die index-pagina. Kaaaah! :shocked:

De 12*43= ca. 500 regels inwendig javascript is niet het enige waar deze pagina onder lijdt...
Hou je vast voor wat je allemaal tegenkomt:
Code: 
23 images van elk ca. 50kB, samen .....:    1.104   kB
 1 stylesheet.css .....................:        1,8 kB
 1 lightbox.css .......................:        1,6 kB
 1 prototype.js .......................:      123,2 kB
 1 scriptaculous.js (Page Not Found)...:        0
 1 lightbox.js (Page Not Found) .......:        0
 1 menu.js voor lte IE7 (ook 404)......:        0
 1 html-pagina ........................:       27,1 kB
========================================    ==========
30 http-requests                            1.257,7 kB
Met als hopelijk bezielende hints:
  • Schrap de 404-pagina's, die kosten dure http-requests (en proberen het geloof ik ook nog 3 keer extra om te kijken of er niet onderweg iets verloren is wat de 404 veroorzaakte)
  • De (pseudo-) Flash-intro pagina's hebben zo langzamerhand afgedaan, en terecht. De mensen kennen het kunstje, en een index-pagina waarop alleen maar staat "kom binnen" vindt Google ook niet erg de moeite waard.
  • Als er al een intro-pagina is, dan niet qua opmaak volledig in afwijking van de rest van de site, en voorzien van het menu zodat de Google-bot verder kan struinen (en liefst ook enige tekst).
  • Schrap ook het lightbox.css en het prototype.js, want die worden op deze pagina helemaal niet gebruikt. *)
  • Gooi tabellen voor de opmaak uit het raam, en gebruik daarvoor css.
  • Combineer de images tot css background-sprites, dat scheelt enorm aan bestandsgrootte, http-requests en overbodige overhead en latentietijd.
  • Gebruik geen IE-only script: ondanks die kilometer javascript werkt het in- en uitfaden niet in FF, Chrome, Opera, Safari enz. Die doen alsof ze een FOUC tegenkomen en flitsen in plaats van faden! (dit IE-script werkt toevallig voor het faden met hetzelfde transBlend-filter als wat de FOUC tegengaat).
  • Leen geen javascript-bibliotheken als het niet persé nodig is, en zorg voor maatwerk aan scripts: kleiner, adequater en sneller.
  • Zet er een Strict Doctype boven.
  • Gebruik geen <center>- en andere "D = deprecated" tags en eigenschappen (overzicht hier resp. hier).
  • Geef javascripts altijd het type="text/javascript" mee voor de verstaanbaarheid bij browsers en html-validator.

Wat gebeurt er als je dat doet?
Op deze manier kan je krijgen:
Code: 
 1 image voor het paneel en alle popups:      74,9 kB
 1 image voor de pagina-background ....:      24,7 kB
 1 stylesheet op maat (ca. 100 regels).:       2,2 kB
 1 javascript op maat (125 regels **)..:       4,2 kB
 1 html-pagina ........................:       1,8 kB
========================================    =========
 5 http-requests, en uit en thuis .....:     107,8 kB
Met als hopelijk bezielende opmerkingen:
  • Als extra zit er een background-img voor de pagina in, in een iets lichtere uitvoering dan op de gewone pagina's (om da aandacht niet van het paneel af te leiden).
  • Als extra zit er opmaak in om dit background-img bij elke resolutie altijd paginagroot te krijgen (op de gewone pagina's valt de pagina-background bijna helemaal weg bij <= 1280*1024px); daar kan dit ook toegepast worden. Zie stylesheet en ook pagina 12 en 13 van m'n Reisverslag uit Cascade-land.
  • Als extra zit er een menu in, voor Google, gebruiksvriendelijkheid en bv. een terugkerende bezoeker die alleen even het telefoonnummer zoekt (scheelt weer het openen van een pagina).
  • Als extra zit er een hidden <h1> in, die wel door text-browsers en de Google-bot gelezen kan worden: noodzakelijk omdat er geen header was en de site-naam anders alleen maar in een image staat.
  • Als extra zit er een <h2> regeltje toelichting bij de titel bij: kan het zelfde zijn als de <meta> met de description. Dan weet de bezoeker waar de titel op slaat, en de de Google-bot dat dit belangrijke trefwoorden zijn.
  • Zie hier voor resultaat bij text-browser en Google-bot (origineel: dit resultaat). ;)
  • De pagina is ook prima te bezichtigen op 1024*768px, en zelfs bij 800*600px.
  • Bij het plaatjespaneel is het schilderij niet losgeknipt en uit elkaar geschoven (dat geeft niet-aansluitende onderdelen), maar afbeelding is iets vergroot en de binnenrandjes zijn uitgegumd (zodat alle lijnen doorlopen).
  • Bij het plaatjespaneel zijn de lege scheidingsrandjes niet knalwit, maar iets getint, om het geheel bij elkaar te houden.
  • Bij het plaatjespaneel is de tekst er uit gehaald en er boven gezet, zodat deze ongebroken is.
  • Via de Welkom-knop kan op FOUC gecontroleerd worden (gebruik vanaf de verschijnende andere pagina de Terug-knop van de browser).
  • Het script werkt ook voor niet-IE browsers.
  • Via de javascript settings zijn de fade-in en fade-out snelheid te regelen, evenals de pauzes tussen het in- en uitfaden.
  • Voor oudere IE's is een automatische versneller ingebouwd, omdat de rendering van de IE-alpha-filters trager loopt dan het gebruik van de opacity-eigenschap.
  • De processie zit nu in een eindeloze loop, maar via de settings van het javascript kan je de serie ook eenmalig laten afspelen.

Op deze manier bestaat de html-code van de hele pagina uit 45 regels ipv de 750, en alles wat in de <body> hoeft te staan is dit:
HTML: 
<body> 
   <div id="background"><img src="images/bh-page-bg.jpg" alt="" /></div>
   <h1>Bezielde Hints</h1>
   <div id="imgContainer"><!-- ID's geven verschijningsvolgorde v/d pop-up's in de vakjes -->
      <span id="pop1">  </span><span id="pop5"></span>  <span id="pop11"></span>
      <span id="pop10"> </span><span id="pop8"></span>  <span id="pop2"></span>
      <span id="pop4">  </span><span id="pop12"></span> <span id="pop6"></span>
      <span id="pop7">  </span><span id="pop3"></span>  <span id="pop9"></span>
   </div>
   <ul id="menu">
      <li><a href="../">Welkom</a></li>
      <li><a href="#test2">Hints</a></li>
      <li><a href="#test3">Gedicht</a></li>
      <li><a href="#test4">Links</a></li>
      <li><a href="#test5">Afspraak</a></li>
      <li><a href="#test6">Nieuws</a></li>
      <li><a href="#test7">Contact</a></li>
      <li><a href="#test8">Schilderij</a></li>
   </ul>
   <h2 id="footer">Vanuit spriritualiteit telefonische<br />en andere adviezen bij levensvragen</h2>

   <!--[if lte IE 8]><script type="text/javascript">var lteIE8='yes';</script><![endif]-->
   <script type="text/javascript" src="scripts/fading-procession.js"></script>
</body>
=====

Kan dat allemaal zomaar?
Ja, dat kan! Je moet er alleen wel wat tijd in steken om het in orde te krijgen.
  • Materiële benodigdheden: een computer met Kladblok of Notepad++, een tekenprogramma voor de plaatjes, en diverse browsers voor het testen.
    Niet nodig: dure html-editors en webontwikkelprogramma's die veel te eigenwijze dingen doen. ;)
Deze intro-pagina kan trouwens ook nog solo draaien, waarbij de css in een stijlblok in de <head> zit, en het javascript ook in de pagina zelf is opgenomen. Dat zijn weer twee http-requests minder, dan zijn alleen de pagina zelf en de twee images op te halen (voor de bestandsgrootte maakt het niet uit).
Afijn, er is bijna niets meer overgebleven:
bezuinigd met meer dan 90% en toch efficiency- en kwaliteitswinst. :)
Dat kan het huidige kabinetsbeleid niet waarmaken! :d

Met vriendelijke groet,
CSShunter
___________
*) Als het gaat om preloaden voor volgende pagina's, volg dan (en ook anders!) de stelregel "CSS in the head, javascript at the bottom". Javascript in de <head> werkt vertragend op het renderen en vlot tonen van de pagina, en het kan toch niet van start voordat de pagina gerenderd is. Daarom pas na de laatste </div> en vlak voor de </body>.

**) Incl. 25 regels gebruiksaanwijzing e.d.
 
Laatst bewerkt:
wow! ongelooflijk.
ik kom er nog op terug, moet zo weg, naar een bluesband kijken, moet ook gebeuren,
maar voor nu alvast ontzettend bedankt.

ps wel nog even dit: dat ' filmpje ' als indexpagina, dat wou de dame in kwestie zelf, vandaar.

groeten jeel2008
 
Varianten van de optocht

Hoi Jeel,
Tja, met opdrachtgevers is het soms moeilijk boterhammen eten. - Ik heb nog een paar varianten. Maar eerst een:

Correctie
In het script stond:
[JS]...
if (loop="on"){ // continue after a cyclus
...[/JS]
Dat moet natuurlijk met een dubbele == zijn:
[JS]...
if (loop=="on"){ // continue after a cyclus
...[/JS]
Anders blijft de processie toch doorwandelen als de loop op "off" is gezet. - Inmiddels hersteld in de uploads.

=====

Variant 1: overvloeiers
Met een paar ingrepen in het script kunnen de in- en uitfaders onafhankelijk van elkaar draaien *). Dat schept de mogelijkheid om het uitfaden van de vorige tegelijkertijd te laten gebeuren met het infaden van de volgende, in plaats van dat de volgende moet wachten tot de vorige klaar is met uitfaden.
Door deze overvloeiers wordt het wat vlotter en appetijtelijker. Met de eindeloze loop:

=====

Variant 2: completeren
Als de herhaal-optie is uitgezet, kan je op het eind het complete schilderij tonen zonder de scheidingslijnen. Dat vraagt weer wat aangepast script, een extra html-regel, een extra img (bh-schilderij.jpg van 28kB) **) en een paar extra css-regeltjes.
Maar dat kan de bestandsgrootte wel hebben. ;)
Aldus:
Dat sluit wel aan bij een holistische gedachte, lijkt me zo. :)

Gegroet!
CSShunter
________
*) Ook iets aanpassing van de lteIE8-settings, die het anders niet kunnen bijbenen.
**) Zo komt het uitgummen goed van pas: anders hadden de puzzelstukjes naar elkaar toe geschoven moeten worden met een veel ingewikkelder script. Nu kan het met de fade-in functie die al klaar staat.
 
Laatst bewerkt:
css, fouc en andere zaken

hallo csshunter
met veel aandacht en interesse heb ik je verhaal gelezen. ik denk het ook wel te kunnen volgen, maar reproduceren is een andere kwestie.:)

het javascipt dat ik gebruikte heb ik ergens op een site gevonden en een beetje aangepast naar eigen believen. daar het een Pro Deo actie was van mij voor deze dame, heb ik er niet veel tijd aan besteed. (en dat bleek dan ook wel, want het rammelt dus aan alle kanten).

hoe dan ook, ik ben weer eens terecht gekomen in de wondere wereld van de css.
mijn vraag is of ik de laatste pagina, fading-procession-with-javascript-solo3.htm, mag gebruiken? uiteraard zal ik in een comment het copyright en een dankwoord aan csshunter richten.

over het verhaal zelf heb ik nog 1 vraag, dat gaat over het verwijderen van de 404 pagina's.
Schrap de 404-pagina's, die kosten dure http-requests (en proberen het geloof ik ook nog 3 keer extra om te kijken of er niet onderweg iets verloren is wat de 404 veroorzaakte)
ik heb wel de paden naar een niet gebruikt css en js bestand eruit gehaald, maar dat is niet wat je bedoelt? voor de rest: zo'n 404 , wordt die niet gewoon gegenereerd door de betreffende zoekmachine? hoe bedoel je dat dan precies: 'schap die hap'?

en ten tweede, de hoop spans achter elkaar.
HTML: 
<div id="imgContainer"><!-- ID's geven verschijningsvolgorde v/d pop-up's in de vakjes -->
	<span id="pop1">  </span><span id="pop5"></span>  <span id="pop11"></span>

	<span id="pop10"> </span><span id="pop8"></span>  <span id="pop2"></span>
	<span id="pop4">  </span><span id="pop12"></span> <span id="pop6"></span>
	<span id="pop7">  </span><span id="pop3"></span>  <span id="pop9"></span>
	<div id="all"></div>
</div>

gaat dat ongeveer zo: ?
laten we pop5 nemen:
span#pop5 { background-position: -110px -535px }
hier regel je de positie

hier: <span id="pop5">
deze staat als tweede genoemd in al die spans.
maar die browser zou ze natuurlijk allemaal tegelijk laten zien als jij niet ergens zou zeggen dat niet te doen. en dat doe je dan dus ergens in het javascript, als ik het goed begrijp? ergens in het js zeg je: pop5 dan en dan tonen.

groeten jeel2008 en bedankt voor de bezielende hints.

ps1 die info over overtollig vet aan de bestanden, krijg je die via http://validator.w3.org/ ? of hoe doe je dat zo snel, zien wat er wel en niet aan een pagina deugt?

ps2 je hebt een mooie reis gemaakt, samen met marianne timmer. ik ga toch eens kijken of ik een klein beetje, heel klein beetje, in je voetsporen kan treden.
 
Laatst bewerkt:
Hoi jeel2008,
het javascript dat ik gebruikte heb ik ergens op een site gevonden
Klik om te vergroten...
Ja, met gevonden voorwerpen, vooral aan scripts, is het altijd uitkijken geblazen:
  • Als ze een demo hebben, die eerst testen op div. browsers.
  • Als ze geen demo hebben, driedubbel uitkijken.
  • De datum van pagina en/of script kan ook signalen geven over de bruikbaarheid.
  • Als er if (document.all){...} in staat, is dat alleen voor IE.
  • Als er in het script over NS4 of NS5 gesproken wordt, gaat het over Netscape 4 en 5 (NS9 was de laatste en al jaren van het toneel verdwenen): dan is het script "iets" verouderd.
=====

mijn vraag is of ik de laatste pagina, fading-procession-with-javascript-solo3.htm, mag gebruiken?
Klik om te vergroten...
Jazeker, natuurlijk! :)

=====

ik heb wel de paden naar een niet gebruikt css en js bestand eruit gehaald, maar dat is niet wat je bedoelt? voor de rest: zo'n 404, wordt die niet gewoon gegeneerd door de betreffende zoekmachine? hoe bedoel je dat dan precies: 'schap die hap'?
Klik om te vergroten...
Mooi dat ze er uit zijn. Maar het gaat hier niet om zoekmachines (die negeren ze inderdaad), maar om de browser van dienst van de bezoeker. Als een browser in de html-code een verwijzing naar een of andere bron tegenkomt:
  • Dan vraagt de browser bij de bron het bestand op. Dit opvragen is een verzoek (http-request) van de bezoeker naar de server waar het bestand op staat. Dat betekent: vanaf de bezoeker gezien is dit uploaden van de vraag, nodig om vervolgens die server het bestand te laten downloaden.
  • Nu is de internet-verbinding meestal asymmetrisch, d.w.z. uploaden gaat veel trager dan downloaden. Bij mij levert een speedtest via www.mordax.nl als resultaten:

    Code: 
    Uw downloadsnelheid bedraagt .....: 1024 kbps.
Uw uploadsnelheid bedraagt .......:  105 kbps.[/COLOR][/SIZE][/FONT]
    [*]Het geheim van een snelle pagina zit dus vooral in zo min mogelijk http-requests, lees: zo min mogelijk verwijzingen naar ingrediënten die opgehaald moeten worden. Vandaar ook de aanbeveling om als het even kan de images te combineren in een "sprite".
    [*]Als een bestand niet gevonden kan worden, dan negeert de browser inderdaad zo'n 404-melding. Maar het was wel eerst zo'n traag http-request dat afgehandeld moest worden!
    [*]Ik dacht ergens gelezen te hebben dat bij een 404 de browser het nog een paar keer probeert, alvorens definitief af te haken en de opdracht te negeren: nog een paar overbodige http-requests...

Al met al: schrappen van links naar niet-bestaande bestanden is pure tijdwinst.

=====

de hoop spans achter elkaar ... gaat dat ongeveer zo: ?
Klik om te vergroten...
In de html staan de spans achter elkaar, en elk span is volgens de css een vierkantje:
Code: 
#imgContainer span {
	float: left;
	width: 110px;
	height: 110px;
	margin: 0 7px 7px 0;
	padding: 0;
	border: 1px solid #588872;
	background: url(images/bh-sprite.jpg) no-repeat;
	visibility: hidden;
	}
Door het links floaten en de breedte van de #imgContainer passen er steeds maar 3 naast elkaar, de volgende moet duiken naar de volgende regel.
Door de margins rechts en beneden komen ze op een afstandje van elkaar met de vereiste tussenruimte.
Door de toegevoegde border krijgen alle vierkantjes hetzelfde mooie groene randje: dat is scherper dan wat de .jpg-afbeelding ervan kan maken (en zonder "blur" / smoezelige groene kleur):

jpg-met-css-border.png

Door de {visibility: hidden;} worden de <span>'s, die immers in een laag boven de complete achtergrond in de #imgContainer zitten, aan het oog onttrokken, terwijl ze wel allemaal hun goede positie in het vierkantjes-tableau blijven innemen.

En inderdaad, het bij #pop5 behorende plaatje wordt met de background-position binnen zijn vierkantje op de juiste plek gerangeerd:
Code: 
span#pop5  { background-position: -110px -535px }
=====

maar die browser zou ze natuurlijk allemaal tegelijk laten zien als jij niet ergens zou zeggen dat niet te doen. en dat doe je dan dus ergens in het javascript, als ik het goed begrijp? ergens in het js zeg je: pop5 dan en dan tonen.
Klik om te vergroten...
Ja, maar de invisibility was al geregeld met de css.
Het aanzetten gaat wel met het script. Dat is het eerste klusje van het script zodra een vierkantje moet gaan infaden:
[JS]function fadeIn(opacity) {
// make object visible and set immediately opacity=0 (hide again before fading in):
objInfading.style.visibility="visible";
... enz.[/JS]
Nu zou de pop-up in het vierkantje meteen voor de volle 100% getoond worden, maar meteen erachteraan wordt de opacity op 0 gezet, en die waarde toegediend aan de betreffende span (het objInfading):
[JS]...
if ( !opacity ){ // no need to give a starting opacity value (i.e.: 0)
opacity = 0;
}
if (opacity <= 70) { // dat is dus bij de start het geval, dan staat de opacity op nul
setBrowserIn(opacity); [/JS]
De setBrowserIn(opacity) functie spreekt alle browsers op hun eigen manier aan om de opacity-setting te regelen. De opacity="0" wordt dus meteen doorgegeven, en plaatje blijft onzichtbaar.
Daarna regelt de fadeIn(opacity) functie het stelselmatig toenemen van de opacity, tot die de 100% bereikt heeft en het pop-up plaatje op volle sterkte zichtbaar is.
  • NB: Na het uitfaden hoeft de visibility niet meer op "hidden" gezet te worden, want voor alle browsers staat op hun eigen manier de opacity toch al op nul.
=====

die info over overtollig vet aan de bestanden, krijg je die via http://validator.w3.org/ ? of hoe doe je dat zo snel, zie wat er wel en niet aan een pagina deugt?
Klik om te vergroten...
Nee, niet via de html-validator, maar anders:
  • Ik kijk eerst altijd even naar wat het "Web Page Speed Report" van www.websiteoptimization.com/services/analyze/ er over te zeggen heeft.
  • Die zit ook als "View Speed Report" onder het menu-item "Tools" ingebakken in de Web Developer Toolbar (chrispederick.com/work/web-developer/), dan hoef je niet eerst de URL in te tikken in een formulier.
  • In dit geval gaf het Speed Report geen sjoege, en als dat een paar keer achter elkaar gebeurt, heeft websiteoptimization kennelijk een timeout voor z'n kiezen: een signaal dat er iets aan de hand is, waarschijnlijk met de paginagrootte!
  • Maar niet getreurd, we komen er wel achter. Dan kan het ook anders, via de YSlow add-on voor Firefox, dat onderdeel wordt van de Firebug add-on (die er dus ook moet zijn).
  • In YSlow-menu > Components zie je waaruit de pagina bestaat, en hoe groot de diverse onderdelen zijn. Met beklikken van de +'jes kom je er achter dat sommige bestanden niet bestaan.
    En, ah, maar liefst 23 stuks images > 1MB...
  • Dan even kijken naar de css-bestanden, weer via de Web Developer Toolbar (menu CSS > View CSS): met "collapse All" krijg je een mooi overzichtje. Valt op: er wordt een lightbox.css opgehaald.
  • Dan even kijken naar de scripts (menu Information > View JavaScript): weer een mooi lijstje. Openklikken leert: het prototype.js is er, maar het scriptaculous.js en het lightbox.js niet. Die zijn dan voor de pagina niet nodig. Dat wisten we al van YSlow. Maar dan is ook het lightbox.css niet nodig!
  • Vervolgens de html ingedoken, om te kijken wat het prototype.js precies doet.
  • Ah, er zit in de head ook nog een Conditional Comment met een ltIE7-only menu.js. Die kan de Developer Toolbar in Firefox niet zien! Nieuwsgierig van aard: even kijken (intikken in de adresbalk) > o, niet te vinden!
  • Verder zie ik zo gauw niet waar het prototype.js wordt aangeroepen: dat gaat meestal via een of andere $(id) opdracht, maar die kom ik niet tegen.
  • Voor de veiligheid even gecheckt door een pagina zonder het prototype.js te maken: die doet het op dezelfde manier als met dat script; dus overtollig vet!
  • En natuurlijk als standaard-routine: de css-validator (ok) en de html-validator (54 errors, o.a. geen Doctype).
Zo is 't gekomen:
  • Eerst eens een css-sprite met alle images maken,
  • met schone html-lei beginnen,
  • snufje css toevoegen,
  • een werkschema'tje maken voor mooie paardesprongen over de afbeelding,
  • en javascript aanpassen van een al op de plank liggend fade-in carrousel. :)
Met vriendelijke groet.
CSShunter
 
Laatst bewerkt:
gegeneerd genegeerd gegenereerd

hall csshunter, ok, ik ga er nog uitgebreider naar kijken, maar even iets herstellen eerst:
ik had een schrijffout gemaakt en gezegd:
zo'n 404 , wordt die niet gewoon gegeneerd door de betreffende zoekmachine?
dat moest zijn : zo'n 404 , wordt die niet gewoon gegenereerd door de betreffende zoekmachine?
jij las echter: zo'n 404 , wordt die niet gewoon genegeerd door de betreffende zoekmachine?

grappig toch, taal. maar goed, voor het antwoord maakt het niet zoveel uit. ik vroeg me af waar die 404paginas vandaan komen, maar natuurlijk wordt die niet gegenereerd door de zoekmachine bedenk ik me nu, want die zoekt alleen maar, maar eerder door de server van je provider? of zo?

tot later en wederom bedankt uiteraard

-------------------

1. wel , het is nu wat later en ik heb een sprite gemaakt.
edoch..http://www.jeelsites.nl/sprite.html
de auto staat wat uit het lood, terwijl alles toch op 30px staat.

maar het begin is er. een sprite is dus niets anders dan een soort...schilderij, waarvan je steeds maar een klein stukje met je zaklantaarn beschijnt.
zoiets? en de grootte van het verlichte deel bepaal je door de height (en width eventueel).
en WAAR ie schijnt, dat is dan de backgroundposition? vind ik een beetje een ongelukkig term, maar misschien snap ik het ook wel niet.
voor mij is de backgroundposition niets anders dan de plaats op de x en y as, waar het gehele image begint, maar dat is het dus niet?

2. zie image runyslow.jpg. als ik Run Yslow doe gebeurt er niets.
reden:
ik dacht ergens gelezen te hebben dat het niet werkt met firefox 9.0.1, dan zal dat het wel zijn, want die heb ik.
in combinatie met firebug 1.9 , want die heb ik ook.
vond dit nog: http://techblog.willshouse.com/2012/01/22/make-yslow-work-with-firefox-9-0/
dus dat wordt rommelen.

3. voor de rest je lijst afgewerkt en alle links die je gebruikte ter controle van de site als bladwijzer in een map gezet.
daarna de site er even op jouw manier doorheen gehaald en die overbodige dingen er uitgegooid.
zometeen nog ff naar de htmlfouten kijken.
 

Bijlagen

  • runyslow.jpg
    runyslow.jpg
    67,2 KB · Weergaven: 54
Laatst bewerkt:
ik vroeg me af waar die 404paginas vandaan komen
Klik om te vergroten...
Inderdaad van de server, behalve als er naar een niet bestaand domein gevraagd wordt (bv. www.gegeneerd.nl/generatie.htm). Dan is er geen server, maar komt de browser met een foutmelding. Doen ze allemaal weer een beetje verschillend.
=========
Sprite:
De zaklamp-analogie klopt wel zo ongeveer. Zelf denk ik altijd aan een patrijspoort (artikeltje).

backgroundposition? vind ik een beetje een ongelukkig term,
Klik om te vergroten...
Valt wel mee: de sprite zit er in als background-image, en dat wordt van plaats veranderd. Dus niet de zaklamp gaat ergens anders schijnen, maar de puzzel onder de zaklamp wordt verschoven.
Ten opzichte van het 0,0 punt van de x/y-as (van de lichtcirkel/patrijspoort), dat is correct. En wat buiten de lichtcirkel/patrijspoort valt, wordt gewoon niet getoond (ongegeneerd genegeerd en niet gegenereerd voor het renderen a.h.w.).

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan