Loading screen
Ook soms het idee dat er niets gebeurt als je ergens op een link klikt? Vooral in webapplicaties kan het handig zijn om de gebruiker te laten zien dat er een reactie zal volgen op zijn actie. Daarom heb ik een voorbeeld gemaakt dat die reactie dik in de verf zet.
Met onBeforeUnload
Met behulp van de onBeforeUnload-functie kan je gemakkelijk te weten komen wanneer de gebruiker een actie heeft ondernomen die leidt tot het verlaten van de huidige pagina. Met deze functie kan je bijvoorbeeld ook vermijden dat een gebruiker zonder het te beseffen een pagina verlaat waar hij veranderingen heeft in aangebracht (wat tekst toegevoegd bijvoorbeeld). Meer info over onBeforeUnload vind je bij MSDN. Hoewel het oorspronkelijk een idee was van Microsoft, ondersteunt ook minstens Mozilla/Firefox deze functie.
Want actie = reactie
Browsers laten in hun statusbar meestal de vooruitgang zien van het openen van een nieuwe pagina. Maar dit verloopt niet altijd even vlot. Bovendien is er met de opkomst van Ajax-technieken nood aan het bevestigen van een reactie. Zo’n operatie verloopt immers asynchroon, zonder zelf een verandering teweeg te brengen in de statusbar. Om duidelijk te maken dat de website aan het reageren is kan je dus misschien beter wat anders verzinnen. Verschillende Ajax-enabled applicaties gebruiken al indicatoren, maar slechts voor de delen van de pagina die (zullen) worden aangepast.
Op de demo-pagina zou je bij het verlaten van de pagina een duidelijke melding moeten te zien krijgen, geplaatst boven een doorzichtige achtergrond met daarachter de pagina. Zou, want deze methode is momenteel enkel getest met Internet Explorer 6 en Firefox 1.5. De scripting is te vinden in loadingScreen.js.
Als je je afvraagt waarom ik geen gebruikmaak van een addEvent-functie om het tonen van het laadscherm te registreren als eventhandler: als de onBeforeUnload eventhandler een waarde teruggeeft, wordt aan de gebruiker gevraagd of hij zeker is dat hij de pagina wil verlaten. Perfect als we willen voorkomen dat een pagina met veranderingen niet wordt opgeslagen, niet zo leuk als we gewoon wat willen laten zien.
Dit artikel werd opgenomen in ontwikkeling, usability, website.
Nice! (getest in Opera: werkt niet jammer genoeg)
Vreemd, in Firefox zie’k ‘t ook niet :(
Zag er anders wel leuke functie uit.
Safari doet niets. Firefox (Mac) geeft vliegensvlug een loading schermpje. Ik moet wel niets bevestigen, maar misschien is dat niet de bedoeling?
Je moet niets bevestigen. Als het te snel gaat (wat wil zeggen dat de volgende pagina snel laadt) kan je misschien eens proberen om naar een fictief adres te surfen. Het duurt een tijdje voordat je browser doorheeft dat de site niet bestaat.
Ik ga nog wat werken aan de ondersteuning van andere browsers.
Kijk, hier was ik al een tijdje naar op zoek.. Kan ik de javascript gewoon vrij gebruiken (met naamsvermelding, website enz)?
Je kan de code vrij gebruiken. Als je nog fouten tegenkomt of verbeteringen vindt wil ik ze wel graag horen. :)
Oké, echt hartstikke bedankt!
Da’s een leuke. Kan inderdaad goed van pas komen bij ajax applicaties, maar ik vind het eerder een hebbedingetje bij gewone websites aangezien iedereen gewoon is om naar de vooruitgangsbar te kijken onderaan het scherm. Bij deze laatste wordt de interactie met de gebruiker niet onnoemelijk verhoogt, en echt browsercompatibel is het ook niet blijkbaar.
Het blijft natuurlijk een leuke dingetje om mee te “show-off’en” bij de browsers de het wél ondersteunen :)
Nice work !
helaas werkt dit niet in mijn ajax
het werkt het gewoon op normale page reload ofzo maar als ik ajax ga gebruiken doet ie het niet meer:S
heeft iemand mss een voorbeeldje (duidelijk) met ajax?
Of je Ajax gebruikt mag er niks mee te maken hebben zolang de
onbeforeunloadniet overschreven wordt.