ajax laat pagina al zien voordat bedoeling is
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)
1
2
3
4
5
6
7
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>
<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)
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
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);
}
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)
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
