Preloaden image daarna weergeven na aanklikken.

[tmind]

Beste vrinden,

Ik ben al een aantal uur aan het googlen naar een antwoord/ heb zelf wat uit geprobeerd maar tevergeefs.

Wat ik wil bereiken:
Fotoalbum word weergeven(dit lukt me wel dat word in php gedaan).
Als ik hier op een thumbnail druk dan worden 2 div's zichtbaar gemaakt door een javascript en word er via een Ajax connectie het volgende opgehaald

<afbeeldingtag met info die er in hoort>,<text die onder de afbeelding komt>
Deze waardes worden gesplit en in een array gepropt.

Nou moet er eigenlijk een preload gebruikt worden voor de afbeelding zodat een gebruiker niet een half uur naar een ladende foto kijkt maar een loading.gif weergeeft.

Heeft iemand een iedee of ik new image(); kan gebruiken of iets soortgelijks en dan bij het sucessvol laden van de afbeelding de content pas in mijn div kan pompen?

Even in het kort wat vraag ik:
Een new image(); functie die ik bij een onclick functie kan gebruiken en als deze klaar is nog wat zelfgeschreven code kan uitvoeren.

Laat maar horen wat het helpmij forum voor mij kan doen .

Tmind.

 

[kristoff]

Je wilt dus eigenlijk
een load image laten zien terwijl je wacht op je ajax of wat?

 

[tmind]

Je wilt dus eigenlijk
een load image laten zien terwijl je wacht op je ajax of wat?

Nee want dit zou een eitje zijn dat snap ik wel.. wat ik wil is
Tijdens het Laden van de afbeelding (dus na dat ajax aangeeft welke) een load image laten zien.

Snap je een beetje wat ik bedoel?

 

[dennusz85]

function pict(url){
document.getElementById('afbeelding').style.display='none';
document.getElementById('momentGeduld').style.display='block';
document.getElementById('afbeelding').src='../img/'+url;
}

je zou bovenstaand scriptje kunnen toepassen al hangt het een beetje af van hoe groot de pics zijn.

Elke keer als de gebruiker op een afbeelding klikt loop je door de functie heen:
1- De huidige foto laten verdwijnen
2- een div showen met een tellertje ofso
3- De url van de afbeelding wijzigen in de nieuwe url

Zo blijf je de momentGeduld div zien totdat de img is geladen... de verdere details kun je dan zelf wel invullen neem ik aan

 

[tmind]

function pict(url){
document.getElementById('afbeelding').style.display='none';
document.getElementById('momentGeduld').style.display='block';
document.getElementById('afbeelding').src='../img/'+url;
}

je zou bovenstaand scriptje kunnen toepassen al hangt het een beetje af van hoe groot de pics zijn.

Elke keer als de gebruiker op een afbeelding klikt loop je door de functie heen:
1- De huidige foto laten verdwijnen
2- een div showen met een tellertje ofso
3- De url van de afbeelding wijzigen in de nieuwe url

Zo blijf je de momentGeduld div zien totdat de img is geladen... de verdere details kun je dan zelf wel invullen neem ik aan

Hmm ik zal eens kijken of ik hier iets mee kan als het werkt/niet werkt post ik weer.

 

[tmind]

het werkt een beetje... maar hij laat nog steeds de vorige afbeelding zien... misschien kan ik dit toch nog oplossen. ik frot nog wel wat aan.

 

[tmind]

Dit werkte allemaal niet ideaal maar ik heb er een oplossing voor... op het moment dat iemand het schermpje wegklikt verander ik de foto in het loading.gifje zodat het lijkt alsof hij nog gewoon even bezig is ipv dat je de andere foto nog even ziet.