Vis et animationsur ved load af side - måske Ajax

Hej nemlig

PHP-scriptet vil altid blive afviklet før siden sendes til browseren. Så som du selv er inde på, skal det køre via Ajax.

Fremgangsmåden er at lade siden blive hentet ind i browseren uden at starte PHP-scriptet. Bruger du fx jquery, kan du - når DOM'en er klar - fx vise en tekst (eller animation) på siden, og efterfølgende starte PHP-scriptet med jquery's ajax-funktion og evt indlæse resultatet i DOM'en.

Håber det giver mening :-)

Men 20-30 sekunder? Er tabellerne optimeret? Indexes på de rigtige felter osv.

Jo - det giver lidt mening, og var nok også lidt det, jeg havde forestillet mig.
Men det vil være rart med noget konkret input, fx et eksempel eller tutorial.

"2. Der er tale om et udtræk fra noget varmestyring (IHC-kontrollere). Det er i disse kontrollere flaskehalsene er.

Google: ajax +progress bar

Ét eksempel:
http://codingrecipes.com/ajax-beginner-ajax-tutorial-display-a-progress-bar-or-a-loading-message

et simpelt eksempel med jquery:

$(document).ready(function(){

  $("#ajaxLoadBillede").show();

  $.get('langsomtDokument.php', function(result){
      $("#divResultatSkalSættesIndI").html(result);
      $("#ajaxLoadBillede").hide();
  });

});

<ole>

michael_stim >> med al respekt, så er det, du linker til, et lysende pragteksempel på misforstået Ajax.

Eksemplet bruger innerHTML til at indsætte data i siden med - og det forudsætter jo, at klienten modtager en HTML formateret streng fra serveren. Men at lade serveren HTML formatere data bruger 5-10 gange så mange serverressourcer, som hvis de samme data blev formateret som XML eller JSON.

Det har aldrig været meningen med Ajax, at give serveren mere arbejde og sved på panden, end den i "gamle dage" fik under "Web 1.0" ... præcis tværtimod! Og når spørger netop har problemer med meget lang procestid på serveren, er det nok ikke ligefrem en løsning, han eller hans server vil opleve som et fremskridt  =)

nemlig >> Løsningen er at bruge Ajax - men at bruge det, som det oprindelig blev tænkt og udviklet:
Du foretager en XMLHttpRequest mod serveren. Serveren henter dine data (f.eks. i en DB) - formaterer dem som XML eller JSON - og returnerer dem til klienten. Her oprettes HTML elementer med DOM, og data fyldes i dem, hvorefter de indsættes i siden - igen med DOM. Det er Ajax - det giver mening!  *o)

Den animerede spinner kan du så enten lave som en animeret gif - eller du kan gøre som MS gør i sine sidebar gadgets. Her bruges et lille baggrundsbillede med 15-20 billeder under hinanden. Dette billede loades så som baggrundsbillede i et lille div på 16x16 pixels - og dets backgroundPosition flyttes så 16px ned ad gangen med en setInterval.

Billedet kan under Win7 typisk findes her: C:\Program Files\Windows Sidebar\Gadgets\Weather.Gadget\images - eller under en anden af MS' standard gadgets.

Hvad selve XML/JSON formateringen angår, så kommer det anpå det aktuelle scenarium - og det samme gælder indsættelsen i browserdokumentet.

Ajax adskiller sig fra lørdagskyllinger og andre færdigretter, der kritikløst kan smides i microovnen. Ajax skal der tænkes over og tages stilling til i hvert enkelt tilfælde  *o)

/mvh
</bole>

Eksemplet vil vise dit billede med id="ajaxLoadBillede" når siden åbner, og den vil starte kørsel af det langsomme php script.

Når den er færdig, vil den sætte indholdet af php scriptet ind i en div med id="divResultatSkalSættesIndI", og til sidst fjerne "ajaxLoadBillede"

Har ikke kigget på det ole bole. Var bare et eksempel.

Men jeg burde selvfølgelig have skummet koden igennem først ;o)

michael_stim >> Jeg forstår udmærket ... det er desværre vanskeligere at finde en troværdig og brugbar tutorial om Ajax på nettet, end det er at finde et et par badebukser på Antarktis! Langt de fleste, der skriver om Ajax, har skræmmende ringe indsigt i Ajax - og JavaScript/DOM generelt. Det smitter desværre voldsomt af på de fleste, der bruger Ajax  :o|

Anyway, hvis nogen har lyst til at prøve animationen, jeg beskrev ovenfor, er her et eksempel. Hent først billedet activity16v.png, der ligger for enden af stien: C:\Program Files\Windows Sidebar\Gadgets\Weather.Gadget\images\. Prøv så følgende (som dog ikke er MS' originale script, men noget jeg selv har skrevet og "krøllet sammen"):



Argumentet, der medsendes, når en WaitSpinner instantieres, er elementet, spinneren indsættes i. Dette element skal være positioneret absolute eller relative - og spinneren vil så centrere sig horisontalt og vertikalt

PS: En af fordelene ved denne form for animation er, at man kan bruge PNG24 billeder med semitransparens. Billedet og script tilsammen fylder desuden ikke mere end en animeret gif

PPS: Skal en spinner bruges til flere XHR-kald i samme HTML dokument, skal den ikke instantieres hvergang. Man bruger bare de to metoder show/hide, hvor den første indsætter spinneren og starter timeren - den anden stopper timeren og fjerner spinneren fra DOM'en. Spinneren ligger dog stadig klar til indsættelse i hukommelsen

hmm, der var en gang et billede som blev vist her på siden, indtil doc var loadet.
og det var vist før div. x-ver. af js ?
Noget lign kan vel bruges ?

showsource >> Der er en tilsvarende animeret gif på kategorisiderne. F.eks. vises den her:
    http://www.eksperten.dk/spm/Programmering/Script/PHP/

- når du skifter til en anden scriptkategori i select'en - men den loader også med såkaldt Ajax.

Du kan godt lave noget lignende uden Ajax. Det kræver dog, at sidens HTML ned til og med body tagget og en animeret gif er sendt til klienten (evt. efterfulgt af en flush()), før serveren begynder på den tidskrævende databehandling

Puhha Olebole - jeg bliver knagmene udfordret, da det eneste jeg forstår er, at du er ret skarp på, hvad der er god ajax-kode. Mine javascript-kundskaber svarer nok til en chimpanses viden om det periodiske system.

Men jeg har nu anskaffet mig noget litteratur om Javascript, så jeg kan blive klogere på dette område, og senere på Ajax.

Tusind tak til jer alle for jeres bidrag.

Jeg deler pointene mellem jer der sender et svar - så venligst send svar.

Så er det svartid. Kom med et svar, og jeg deler pointene.

Er der mon nogen, der vil svare???? :)

Lukketid.