Timer pour chargement d'image

Yimimura -  
 slach24 -
Bien le bonjour,

Voila je suis en ce moment en train de créer le site d'une association pour un stage,
et l'une des pages que je créer contient des images en grand nombre
(en gros ce sont les miniatures de photos d'événementiels soutenus par ladite assoc) qui lorsque l'on click dessus font l'effet d'affichage importé via lightbox,
a ce niveau la aucun soucis.

Non la vraie question c'est celle ci: est il possible en php,
ou n'importe quelle autre methode exceptée flash
(oui pas trop envie de me casser la tête a faire un diaporama flash) de faire que lorsque l'on click sur le lien de la page contenant les photos,
afin d'éviter que quelqu'un click direct sur la premiére image (empéchant le lancement de l'effet lightbox),
de faire en sorte qu'un "timer" apparaisse, empéchant toutes action en attendant que la totalité de la page soit chargée avec si possible un petit icone en gif (comme ce lui de lightbox justement) pour faire comprendre que la page charge et qu'il faut patienter.

Merci d'avance :)
Configuration: Windows XP
Firefox 2.0.0.14

3 réponses

  1. Mimiste Messages postés 1159 Statut Membre 206
     
    Oui c'est possible et c'est en javascript

    Le but de la manoeuvre etant d'afficher une div (qui contient une animation ou pas, comme tu veu) en position absolue sur toute la page tant que toute les images ne sont pas chargée
    0
  2. Yimimura
     
    serait il possible d'avoir un exemple dans ce cas? ou le script? que je comprenne un peu mieux la manœuvre s'il te plait?
    0
    1. Mimiste Messages postés 1159 Statut Membre 206
       
      tien je t'envoi sur un site que j'ai réalise et qui utilise ce principe

      www.achtungdass.com

      quand tu clic sur "enter" tu verra une page de loading, c'est une DIV qui prend tout l'ecran et qui ne s'efface que lorsque tout les images ont été chargée

      Regarde la source pour le code, rien n'est caché ;)

      le script est celui ci

      function preload(){
      document.getElementById("preloadCache").style.visibility = "visible"; //J'affiche la DIV
      var pageHTML = document.getElementsByTagName("img") // Je recupere toute les images
      var totalImage = pageHTML.length // Je compte combien y en a

      if (i < totalImage){ //Si i est inferieur au nombre d'image
      if (pageHTML.item(i).complete) { // Je regarde si l'image a l'index i est fini de télécharger
      i++ // J'incremente i pour passer a limage suivante
      setTimeout(preload) // je relance cette fonction pour continuer (sorte de boucle)
      }
      } else {
      document.getElementById("loader").style.visibility = "hidden"; //Je cache ma DIV
      document.getElementById("preloadCache").style.visibility = "hidden"; //Je cache ma DIV
      document.getElementById("menu").style.visibility = "visible";
      document.getElementById("playerlink").style.visibility = "visible";
      document.body.scroll="yes";
      }
      }


      0
      1. slach24 > Mimiste Messages postés 1159 Statut Membre
         
        Merci bcp pour cette fonction, est ce que je peux faire ce loading pour les elements d un formulaire?

        document.getElementsByTagName("input") au lieu de document.getElementsByTagName("img")

        MErci
        0
  3. Yimimura
     
    Merci beaucoup, je vais bien "analyser" le tout afin d'assimiler ça, c'est totalement ce que je recher :) Vraiment merci :)
    0