IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Création d'un loader pour images


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 15
    Par défaut Création d'un loader pour images
    Bonjour à tous,

    certaines pages de mon site sont composées d'une grille d'images. Cette grille est réalisée non pas avec un tableau mais avec des divs qui se répètent, chacune incluant une image (<a href="..."><img src="..." /></a>).
    Pour indiquer au visiteur qu'il y a chargement, je cherche à créer un loader s'affichant pendant le chargement des images. Une fois l'image chargée, celui disparait et l'image apparait en fadeIn.

    Je suis donc parti pour cela sur le code suivant :

    1.HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div id="image-loading" class="loading">
         <a href="lien..."><img ="images..." /></a>
    </div>
    2.CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    #image-loading {
    	width: 309px;
    	height: 130px;
    }
     
    #image-loading.loading {
    	background-image: url(../images/design/loader.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    }
     
    .photo {
    	display: none;
    }
    3. SCRIPT
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    $(document).ready(function() {
         $("#image-loading").removeClass("loading");
         $(".photo").fadeIn(800);
    });
    L'effet à l'air de fonctionner car je vois rapidement le gif animé avant que les images en fondu apparaissent. Le soucis, est que toutes les images semblent être chargées en même temps et donc elles apparaissent toutes en même temps.
    Est il possible de faire apparaitre image par image lorsqu'elles se chargent et donc de composer progressivement la grille d'images ?

    Merci pour votre aide.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    individuellement les images acceptent le load ...

    cependant pour pouvoir faire le code j'ai besoin de comprendre le lien entre les differents éléments ...

    j'ai comme un mauvais pressentiment que tes divs ont tous le même id ???

    de plus ton class photo n'apparait pas au niveau des balises ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 15
    Par défaut
    Bonjour,

    en effet les divs "conteneur" ont toutes le même id "image-loading". La grille est composée d'une répétition de cette div, pour afficher les différentes images. C'est vrai que ça n'a pas l'air bon ça...
    Comme je ne décide pas le nom et le nombre d'affichage de ces divs (site géré par un cms), il faudrait surement appliquer directement la class de l'effet jquery directement sur la balise img. Est ce bien cela ?
    Pour la class "photo" en effet j'ai oublié de la placer dans mon explication. Voici le code html que j'obtiens :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <div id="image-loading" class="loading">
         <div class="photo">
              <img src="http://www.monsite.com/sites/default/files/styles/photo/public/photos/image.jpg" />
         </div>
    </div>
    Merci pour ton aide.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    les id multiples sont à proscrire !
    Résouds d'abord ton souci d'id dupliqués ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. [API HTML5] Réalisation d'un loader pour précharger les images avec canvas
    Par scandinave dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 03/06/2013, 19h57
  2. Création d'une GDB pour Firebird
    Par ada_b dans le forum Débuter
    Réponses: 2
    Dernier message: 03/12/2004, 07h08
  3. Champ BLOB pour IMAGE format JPG and TImage et Interbase
    Par alain_bastien dans le forum InterBase
    Réponses: 1
    Dernier message: 20/10/2004, 16h15
  4. [apache] alias pour images
    Par romuald9999 dans le forum Apache
    Réponses: 2
    Dernier message: 13/08/2004, 09h44
  5. recherche des algorythmes pour images 2d
    Par exxos dans le forum Algorithmes et structures de données
    Réponses: 3
    Dernier message: 24/05/2002, 13h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo