Uitleg / tutorial als data geladen word show animatie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bryan De Baar

Bryan De Baar

02/04/2015 22:54:56
Quote Anchor link
Hallo,

Wat ik mij afvroeg is of er een tutorial of er een site is die kan uitleggen je een loader animatie kan tonen op het moment dat er iets geladen word.

Situatie voorbeeld:

Een button waar je iets me kan laten opvragen "afbeelding, tekstbestand". Als deze button word geklikt dan wil ik een animatie laten zien totdat het bepaalde opgevraagde element gereed is. Natuurlijk moet het element z.s.m. gereed zijn, maar als dit iets groot is dan duurd het natuurlijk ietsjes langer.


Hoop dat iemand een goede tutorial weet of misschien mij opweg kan helpen.


Gr. Bryan
 
PHP hulp

PHP hulp

26/11/2020 01:56:24
 
- Ariën -
Beheerder

- Ariën -

02/04/2015 23:12:08
Quote Anchor link
Ervanuitgaande dat er jQuery wordt gebruikt:


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
$.ajax({
    url: "ajax/script.php",
    cache: false,
    success: function(html){
        $(".result").empty().html(html);
            },
    error:function (xhr, ajaxOptions, thrownError){
            $(".result").empty().html('Er is een fout opgetreden:'+ xhr.status + ' '+ thrownError);
        }    
});


Waarbij er een HTML-element is met een ID result waarbij er een standaard een laad-icoontje (throbber) wordt getoond. Zodra de AJAX-request is gelukt om je data op te halen wordt dat element leeggehaald en de data erin verwerkt die je opvraagt.
 
Jop B

Jop B

03/04/2015 14:06:40
Quote Anchor link
Hier zou ik ook graag wat over willen vragen.
In bovenstaande uitleg word er dus een html ingeladen, tot die tijd draait de thobber.
Als er nu een situatie is dat php een link gegenereerd op de zelfde pagina.

Er word via php een link gemaakt met een aantal variabelen die gecodeerd worden.
Wat kan ik dan doen om de persoon te laten zien dat deze gemaakt word? Liefst met een throbber/spinner.
 
- Ariën -
Beheerder

- Ariën -

03/04/2015 14:46:44
Quote Anchor link
Zo langzaam gaat dat toch niet, een link genereren? Is die throbber daar nou echt voor nodig?
Anders kan je hem vertragen met sleep(5) ofzo. Maar persoonlijk houd ik niet van onnodige wachtmomenten terwijl de data alla lang en breed aangeboden kan worden.
Gewijzigd op 03/04/2015 14:47:31 door - Ariën -
 
Thomas van den Heuvel

Thomas van den Heuvel

03/04/2015 14:52:41
Quote Anchor link
1. start een "animatie" (geanimeerde gif?) voordat je je AJAX call doet, en zet deze weer uit in de success/error functie

of

2. maak het afhandelend script zo snel dat dit niet nodig is

was hier niet laatst een topic over? animatie gifjes?

EDIT: yep, hiero
Gewijzigd op 03/04/2015 15:17:01 door Thomas van den Heuvel
 
Jop B

Jop B

04/04/2015 10:49:57
Quote Anchor link
Bedankt Thomas, ik ga de topic doorlezen :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.