laad icoontje

Is het niet eerst zinvol om te kijken of de laadduur minder kan? En haal je het via AJAX op?
Iets meer informatie mag wel.

Waarom gebruik je font-awesome daarvoor ? gebruik een gifje en je hebt verder geen css (of icon library) of dergelijke nodig.
Hier kun je zelf een load icon maken (presets):

http://www.ajaxload.info/

Maar zoals Aar C ook al zegt, wat meer informatie is misschien wel handig, misschien kun je zelfs voorkomen dat je een load icon nodig hebt (niemand zit te 'wachten' op iets dat aan het laden is).

Bart Matsko op 30/03/2015 12:30:23

Op een website die ik maak haal ik uit een database zo ongeveer 250-300 users op en dat kan soms even duren.

Ik vermoed dat het sneller maken van die query of de afhandeling ervan véél meer oplevert dan de fontbestanden en CSS-code van Font Awesome laden.

Maar als je toch Font Awesome gebruikt... Je kunt de CSS laden met:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Daarna maak je een spinner met:

<i class="fa fa-cog fa-spin"></i>

of met:

<i class="fa fa-spinner fa-pulse"></i>

Cheatsheet

Bedankt voor het mee denken!

Ik zou graag alsnog willen weten hoe zo'n laad icoontje in z'n werk gaat, gewoon om het uit te proberen. Ik laad de database in via PDO en laat het zien door middel van een "foreach".

De bedoeling is dat als je op de webpagina komt, er een laad icoontje te zien is, daarvoor gebruik ik FontAwesome en deze code:

<i class="fa fa-spinner fa-spin"></i>

Als de foreach klaar is, en alles geladen is moet het laad icoontje verdwijnen en de gegevens tevoorschijn komen.

Wie kan mij helpen?

Wanneer je de request doet laad icoontje tonen en wanneer deze klaar is laad icoontje verbergen? Of is dat niet je vraag?

Wouter J op 02/04/2015 15:43:37

Wanneer je de request doet laad icoontje tonen en wanneer deze klaar is laad icoontje verbergen? Of is dat niet je vraag?

Ik denk het niet, volgens mij moet het zo zijn dat zolang hij door de "foreach" heenloopt er een laad icoontje te zien is of zo iets dergelijks?

Als je via AJAX werkt, want je wilt de site zelf niet onnodig vertragen, dan laad je de data in vanaf een apart script uit een apart bestand.

Als je gebruik maakt van $.ajax() in jQuery, dan kan je bij het success: event het laadicoontje (vaak Throbber genoemd) weghalen, en de data in het juiste HTML-element tonen.

Maar even serieus: voor 250 rijen hoef je toch geen laad-icoontje te tonen?
Het laadicoontje aan HTML, font, Javascript etc is al meer 'werk' dan de HTML-lijst van je 250 rijen???

Dan blijf ik benieuwd... wat maakt het tonen van 250 rijen nou zo traag?

Aar C op 02/04/2015 16:37:25

Als je via AJAX werkt, want je wilt de site zelf niet onnodig vertragen, dan laad je de data in vanaf een apart script uit een apart bestand.

Als je gebruik maakt van $.ajax() in jQuery, dan kan je bij het success: event het laadicoontje (vaak Throbber genoemd) weghalen, en de data in het juiste HTML-element tonen.

Hoe moet het als je niet via AJAX werkt? Aangezien ik daar nog geen enkele ervaring mee heb en daar later pas aan wil beginnen.

[size=xsmall]Toevoeging op 02/04/2015 17:12:27:[/size]

Eddy E op 02/04/2015 16:54:21

Maar even serieus: voor 250 rijen hoef je toch geen laad-icoontje te tonen?
Het laadicoontje aan HTML, font, Javascript etc is al meer 'werk' dan de HTML-lijst van je 250 rijen???

Is niet nodig, maar ik wil graag weten hoe het werkt.