ajax laat pagina al zien voordat bedoeling is

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Martijn

Martijn

16/08/2007 12:10:00
Quote Anchor link
Beste mensen

Ik heb een fotopagina gemaakt. Via een script worden er automatisch thumbnails gemaakt (php - GD library). Nu wil ik dat tijdens het laden (en het creeeren) van de thumbnails er een preloader wordt getoond.

Mijn huidige opzet is als volgt:

index.php (code van toepassing)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<BODY bgcolor="660000" onLoad="loadThumbs('<? echo $pagina; ?>')">

<div id="hoofd">

<img src="indicator.gif" id="indicator" style="display:none;">

</div>


loadThumbs staat in een extern javascript bestand javascript.cs

javascript.cs:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function makeXmlHttp(){
      var xmlhttp = null;
      if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
      }else{
           try{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }catch(e){
                window.alert("Uw browser ondersteunt het XMLHttpRequest object niet!");
           }
      }
      
      return xmlhttp;
 }
 
 function loadThumbs(pagina){
      
      var indicator = document.getElementById("indicator").style;
      var contentDiv = document.getElementById('hoofd');
      
      var xmlhttp = makeXmlHttp();
      
      xmlhttp.open("POST", "makeThumbs.php?pagina="+pagina, true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlhttp.onreadystatechange = function() {
           if(xmlhttp.readyState == 4){
                indicator.display = "none";
                contentDiv.innerHTML = xmlhttp.responseText;
           }
      }
      indicator.display = "inline";
      xmlhttp.send(null);
}


Hier vandaan wordt dus makeThumbs.php aangeroepen. In dit bestand wordt de layout gemaakt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<img src='pic.php?foto=".$aFotos[$iTeller]."&pad=".$sFotomap."' border='0' class='foto' />


Vanuit makeThumbs.php wordt dus pic.php aangeroepen waar de werkelijke thumbnail gemaakt wordt.

Wat is nu mijn probleem. Het probleem is dat als de pagina geladen wordt ik een preloader wil zien (indicator.gif) tijdens het maken en laden van de thumbnails. Maar ik zie in een flits de preloader en daarna wordt de pagina getoond en zie je de thumnails laden.

Dat wil ik dus niet. Ik wil dat als de preloader verdwijnt, alle thumbs in 1 keer zichtbaar zijn.

Ik hoop dat mijn verhaal een beetje duidelijk is en dat ik genoeg code heb gegeven waarmee je uit de voeten kan.

Ieder geval bedankt alvast :)

- Martijn
 
PHP hulp

PHP hulp

04/10/2024 07:30:24
 
- wes  -

- wes -

16/08/2007 12:11:00
Quote Anchor link
sja ajax presteert vaker te vroeg
 
Jelmer -

Jelmer -

16/08/2007 13:59:00
Quote Anchor link
Als het alleen maar om een plaatje gaat, dan kan je net zo goed gaan voor new Image(). Als het goed is heeft dat object een onLoad property, waar je net zoals window.onload een functie aan kan hangen. In jouw geval een functie die het wacht-ding verbergt en de src van de thumbnail gelijk maakt aan de src van je Image object (want die zit nu immers mooi in de cache)
 
Martijn

Martijn

16/08/2007 16:33:00
Quote Anchor link
Nee het gaat om 16 thumbs per pagina en die thumbs worden on-the-fly gemaakt.
 



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.