Usability en onload-events

Een functie uitvoeren zodra een pagina geladen is, kun je doen met een window.onload event (of een body.onload event). Die events worden echter pas getriggerd na het laden van de hele pagina, inclusief alle afbeeldingen.

Dat kan lang duren; op zich is dat al niet goed, maar het kan daardoor ook zorgen voor usability problemen. Oplossing hiervoor is je functie al te laten uitvoeren zodra het DOM beschikbaar is (DOM ready). Dan hoef je niet meer te wachten tot alle overige content geladen is.

Ik leg uit hoe je dit kan doen en geef een voorbeeld van een usability probleem dat je hiermee kunt voorkomen.

Usability-voorbeeld: onload selecteren van formulierveld

Als het invullen van een formulier het belangrijkste doel is van een pagina, ben ik er altijd voor om bij het laden van die pagina het eerste formulierveld direct te selecteren. Dat scheelt de gebruiker immers een keer klikken. Maar als dat selecteren gebeurt door een window.onload, en er veel afbeeldingen op de pagina staan, kan dat een ongewenst effect opleveren.

Als de pagina traag laadt heb je de kans dat je gebruiker zelf al het veld aanklikt en begint met typen. Vervolgens wordt het window.onload event getriggerd, en wordt de tekst die de gebruiker aan het typen is geselecteerd. Dat heb je als gebruiker niet door, waardoor je over het net geselecteerde begin van je tekst heen typt. Ervaar het zelf op deze pagina.

Wat als verbetering van de usability bedoeld was, levert zo een verslechtering op.
Wanneer je het veld direct selecteert zodra het DOM beschikbaar is, kun je dit soort problemen vermijden.

Hoe werkt het?

Javascript frameworks als Prototype en jQuery bieden standaard ondersteuning voor DOM ready. Maar ook als je geen framework gebruikt kun je dit toepassen. Er bestaat een speciaal event voor wanneer het DOM gereed is: het DOMContentLoaded event. Bijna alle browsers ondersteunen dit, met één grote uitzondering: Internet Explorer.

Daarom gebruik ik niet dit event, maar een aparte (niet door mij bedachte) functie addDOMLoadEvent. Hiermee kun je ook eenvoudig functies onafhankelijk van elkaar toevoegen. De functie addDOMLoadEvent vind je hier. Aanroepen doe je als volgt:

<script type="text/javascript">
	function someFunction() {
		alert("getriggerd bij DOM ready");
	}
	addDOMLoadEvent(someFunction);
</script>

Daarbij is someFunction de naam van de functie die je wilt aanroepen, zonder aanhalingstekens en zonder parameters. Wil je parameters mee geven, dan kun je dat doen door in plaats van de functienaam een zogenaamde anonymous function mee te geven:

<script type="text/javascript">
	function someFunction(msg) {
		alert(msg);
	}
	addDOMLoadEvent(function(){
		someFunction("getriggerd bij DOM ready");
	});
</script>

Wil je meerdere functies onload laten uitvoeren, dan kun je ze simpelweg na elkaar toevoegen:

<script type="text/javascript">
	function someFunction() {
		alert("getriggerd bij DOM ready");
	}
	function someOtherFunction() {
		alert("2e functie getriggerd bij DOM ready");
	}
	addDOMLoadEvent(someFunction);
	addDOMLoadEvent(someOtherFunction);
</script>

Voorbeeldpagina

Op deze voorbeeldpagina zie je het verschil tussen window.onload en DOM ready. Ook kun je daarop het usabilityprobleem zelf testen.

Weet je meer voorbeelden?

Ken je meer voorbeelden waar deze vorm van onload gebruik de usability verbetert? Of zie je juist nadelen van deze methode? Laat het me weten in de reacties.

2 reacties op “Usability en onload-events”

  1. Hallo Jarón,

    Wat betreft Usability en onload-events het volgende:

    De voorbeeldpagina werkt niet onder FireFox 3.5
    Is dit correct?

    Groet, Fred.

    zegt Fred
  2. Fred, bij mij doet de voorbeeldpagina het gewoon in Firefox 3.5. Wat werkt er precies niet?

    Wat de voorbeeld pagina zou moeten doen:
    – de gele box onderaan de pagina geeft 3x een melding: bij het beschikbaar komen van het DOM, bij het triggeren van het DOMContentLoaded event en bij het triggeren van het window.onload event;
    – bij het window.onload event wordt het eerste input veld geselecteerd;
    – de pagina laadt een afbeelding van ca. 1.5MB in om het triggeren van het onload event te vertragen.

    Als je op een erg snelle verbinding zit kan het natuurlijk zo zijn dat de afbeelding er meteen staat, en dan zie niet goed wat er gebeurt. Aan de gele box kun je dan wel zien in wat voor volgorde de zaken getriggerd worden.

    zegt jaron

Geef je reactie

Velden met een * zijn verplicht

*
(wordt niet getoond)
*