Changement d'url avant affichage d'un div
Bonjour
Voici mon problème.
Je suis en train de développez un site d'album photo.
J'ai concu le iste d ela façon suivante:
Une grille affiche toutes les photos en miniatures.
En supperpositions, j'ai deux div (en mode hidden) :
La première et transparente à 50% avec un fon coloré
La seconde (au dessus, Z-index supérieur) contient l'image agrandie et le texte.
Sur les miniatures, dès que je clique je lance le script suivant:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function apparaitre()
{
document.getElementById('photo').style.display = 'block';
document.getElementById('photo_masque').style.display = 'block';
}
function changeimage(url)
{
document.getElementById('image').src= url;
apparaitre();
}
<img onClick=\"changeimage('get_image.php?fichier=$fichier&taille=800'); \" src=\"./get_image.php?fichier=$fichier&taille=200\"> |
Ce qui a donc pour effet de changer l'url de l'image et d'afficher les deux calques. A l'inverse un clic sur l'image cache les deux calques.
Ce système marche bien en local.
Mais en production, dès que je clique sur une image, j'ai l'affichage des deux calque mais avec l'image sélectionnée la fois d'avant. C'est seulement une fois l'image sélectionnée en taille normal chargé que cette dernière s'affiche !!
Je souhiaterais pouvoir afficher le claque avec une image de "loading" pendant le chargement et afficher l'image taille normale une fois celel ci chargée...
Quelqu'un a une idée de comment faire cela ?
Merci
