11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour

J'ai une petite question concernant javascript.
J'ai suivi le tuto d'alsacreations permettant de réaliser une galerie simplement avec du js. Par contre mes photos sont longues à charger et si quelqu'un clique sur une miniature avant que la page ai fini de se charger, la photo s'affiche en popup.

Existe t-il une fonction en js qui permette de bloquer tout les liens le temps de charger la page?

Merci d'avance
Yop !

Je ne pense pas que ce soit la bonne façon de voir les choses.
Pourquoi ta photo ne s'afficherait pas là ou elle doit s'afficher?

Peut être est il plus judicieux d'afficher une image temporaire (genre gif de chargement) lors du clique sur une miniature, qui sera remplacée une fois l'image chargée.

Mais sinon, peut être peux tu n'ajouter le liens sur l'image, qu'après le chargement de ta photo?
Je ne sais pas de quel tuto tu parles, donc je ne sais pas de quoi tu pars.

Mais peut-être peux tu faire ceci :

_Afficher ta miniature (juste l'image, sans le lien),
_Après le chargement de l'image réelle, ajouter le à la miniature en JS.
Bonsoir

Désolé de ce retard, j'ai un peu zappé ce projet pendant un bout de temps...

En fait c'est ce tutoriel : http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html

Par contre par exemple je charge 50 photos, et il est pas possible d'en faire des miniatures, et donc lorsque l'on clique sur une miniature avant la fin du chargement, cela ouvre une photo en pop up. J'aurais donc aimer désactiver les liens tant que la page n'est pas entièrement chargée.

J'ai essayé les onload et cie mais cela ne prend pas en compte le chargement des images...


Merci d'avance
Yop !

onload marche parfaitement pour attendre un chargement de photo, je l'utilise plusieurs fois dans un projet de galerie.

La syntaxe est la suivante :


MonImage.onload = function()
      {
            //Ce qui se trouve ici ne sera exécuté qu'après le chargement de l'image//
      }
J'avais testé le onLoad sur le body et le window c'est pour ça....
Par contre là ton "monImage" cela correspond à l'id d'une image c'est ça?

Parce qu'il faudrait à ce moment là que je le mette sur la dernière vignette.


Merci de ton aide
Salut Ayor81,

En l'occurrence, le MonImage correspond à un objet JavaScript Image.

Et à ta place je ne le mettrais pas sur ma dernière vignette, mais pour chaque vignette chargée.
Cela permet, par exemple, d'ajouter au fur et à mesure les liens pour tes vignettes.
L'utilisateur n'est pas obligé d'attendre je chargement de toutes les images.

Je ferais ça comme ça :

code HTML

<div id='galerie'>
      <img />
      <img />
        ...
        ...
      <img />
</div>


Et dans ton code JavaScript :

_Tu récupère l'élément d'id 'galerie',
_Pour chacun de ses enfants de type IMG tu :
___Charge l'image taille réelle,
___Aoute le lien à l'image une fois que celle ci est chargée.