inladen duurt lang

Status
Niet open voor verdere reacties.
C

caroline40

Gebruiker
Lid geworden
30 mei 2007
Berichten
22
Hallo allemaal,
Ik hoop dat jullie mij kunnen helpen. Ik heb een javascript gebruikt om foto's te tonen, maar omdat van de grote foto's automatisch thumbnails worden gemaakt, duurt het erg lang voordat alle foto's geladen worden. Hebben jullie daarvoor een oplossing. De foto's zijn maar 50 kb per stuk, dus daar ligt het niet echt aan.
Bij voorbaat dank voor de moeite!
Groetjes, Caroline

Zie ook: www.paardencrematoriumwesterhout.nl
____________________________________________________
Code: 
<script type="text/javascript">
BeeldLijst=new Array()
BeeldLijst[BeeldLijst.length]="images/bouw1.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw2.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw3.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw4.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw5.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw6.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw7.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw8.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw9.jpg"
BeeldLijst[BeeldLijst.length]="images/bouw10.jpg"
pic=new Array()
for(i=0;i<BeeldLijst.length;i++){
pic[i]=new Image()
pic[i].src=BeeldLijst[i]}

function init(z){
if(!z){z=0}
containerBreedte=parseInt(document.getElementById("foto").style.width)
containerHoogte=parseInt(document.getElementById("foto").style.height)
obj=document.getElementById("afbeelding")
obj.src=pic[z].src
beeldBreedte=pic[z].width
beeldHoogte=pic[z].height
obj.style.left=0
obj.style.top=0
pos_x=0
pos_y=0
nu_links=0
nu_boven=0
obj.style.width=beeldBreedte
obj.style.height=beeldHoogte}

function horizontaal(n){
nu_links=parseInt(obj.style.left)
if(n==0){nu_links-=actief}
if(n==1){nu_links+=actief}
if(nu_links> -actief){
nu_links=0
stop()}
if(nu_links < containerBreedte - obj.offsetWidth+actief){
nu_links = containerBreedte - obj.offsetWidth
stop()}
obj.style.left=nu_links + 'px'
}

function verticaal(n){
nu_boven=parseInt(obj.style.top)
if(n==0){nu_boven-=actief}
if(n==1){nu_boven+=actief}
if(nu_boven> -actief){
nu_boven=0
stop()}
if(nu_boven < containerHoogte - obj.offsetHeight+actief){
nu_boven = containerHoogte - obj.offsetHeight
stop()}
obj.style.top=nu_boven + 'px'
}


</script>
</head>

<body onload="init()">
<a href="#" onclick="init(0)"><img src="images/bouw1.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(1)"><img src="images/bouw2.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(2)"><img src="images/bouw3.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(3)"><img src="images/bouw4.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(4)"><img src="images/bouw5.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(5)"><img src="images/bouw6.jpg" width="60" height="50" border="0" alt="" /></a><br />
<a href="#" onclick="init(6)"><img src="images/bouw7.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(7)"><img src="images/bouw8.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(8)"><img src="images/bouw9.jpg" width="60" height="50" border="0" alt="" /></a>
<a href="#" onclick="init(9)"><img src="images/bouw10.jpg" width="60" height="50" border="0" alt="" /></a>
 
Hey,

Dit ligt niet aan de javascript, de fotos zijn inderdaad niet extreem groot (50kb zoals je zei), dus er is maar één logische conclusie. De server waarop je site staat heeft een langzame verbinding, of begrensd de snelheid per gebruiker naar een onredelijk laag niveau.

Je zult dus of van host moeten veranderen of met je host moeten mailen om te kijken of er iets aan de hand is.
 
Laatst bewerkt:
Bedankt voor je bericht. Ik ga het met de provider opnemen en vragen hoe dat zit.
Ik heb er nu maar een regel bij gezet dat bezoekers meteen op de 1e foto kunnen klikken tijdens het laden. :)

Groetjes, Caroline
 
De server is van je site is inderdaad langzaam, :confused: maar het script kan ook nog wat verbeterd. :)

Zo hoef je de plaatjes niet van te voren in te laden:
PHP: 
<style type="text/css">
 #foto_container img { cursor: pointer;}
</style>

<script type="text/javascript">
 function show(photo) {
  document.getElementById('afbeelding').src = photo.src;
  };
</script>

<div id="foto" style="width:587px;height:528px;overflow:hidden; ">
 <img id="afbeelding" src="images/bouw1.jpg" style="position:relative;left:0px;top:0px;display:block">
</div>

<div id="foto_container"><br />
<p><b>Foto's Bouw</b><br />U kunt tijdens het laden van de foto's meteen op de eerste klikken</p>
<img onclick="show(this)" src="images/bouw1.jpg" width="60" height="50" border="0" alt="" />
<img onclick="show(this)" src="images/bouw2.jpg" width="60" height="50" border="0" alt="" />
<img onclick="show(this)" src="images/bouw3.jpg" width="60" height="50" border="0" alt="" />
<img onclick="show(this)" src="images/bouw4.jpg" width="60" height="50" border="0" alt="" />
........
</div>
  • De style #foto_container img { cursor: pointer;} geeft de kleine foto's een handje, dat kan ook in de css staan,
  • de functie show() geeft de grote foto weer,
  • img id="afbeelding" src="images/bouw1.jpg" geeft meteen de eerste foto weer,
  • onclick="show(this)" roept de functie aan als je op een kleine foto klikt.

Bijlage is een werkend voorbeeld. :)


Als je thumbnails maakt dan laadt de pagina 10x zo snel. Plaats je die in de map images/klein/ dan werkt 't script zo weer:
PHP: 
function show(photo) {
 document.getElementById('afbeelding').src = photo.src.replace('klein/','');
 };
:)


Vr.Gr. Egel.
 

Bijlagen

Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan