Comment insérer une image de chargement sur un site

loadingTout le monde connaît ces petites images animées qui signalent le chargement d’une page Web.

Bien pratique en effet pour temporiser l’impatience de celui qui veut que la page sur laquelle il vient d’arriver se charge instantanément.

Quoi qu’on fasse pour alléger nos pages Web, il faut parfois accepter que quelques interminables secondes s’écoulent avant que tout le contenu s’affiche.

D’ailleurs à ce propos… avez-vous remarqué que plus la technique va vite et plus nous sommes impatients ? C’est un truc qui ne cesse de m’épater !

Alors ces petites images de chargement, je connaissais un site pour les créer et les télécharger, mais je ne savais pas comment les insérer dans un site Web.

Lacune comblée avec une petite vidéo anglo-saxonne qui m’a donné l’idée d’en faire une aussi pour vous expliquer comment on fait.

C’est tout simple en fait, mais encore faut-il avoir les lignes de code nécessaires. Je vous les donne dans un fichier .txt à télécharger sous la vidéo.

 Télécharger le fichier de code.

Amusez-vous bien ! 🙂

***

separator

 

  1. mentalisme
    mentalisme07-11-2011

    Bonjour,

    C’est très intéressant, surtout en ce qui concerne ajaxload.info. Il m’était déjà arrivé d’utiliser ce genre de procédés sur des applications clients un peu « lourdes » (et donc qui avaient tendance à faire fuir le chaland) mais je passais toujours beaucoup de temps à trouver l’image de chargement qui allait parfaitement s’intégrer dans l’interface web. Euréka ! 🙂

    Merci beaucoup.
    Stéphane

    • AlxLem
      AlxLem07-11-2011

      Bonjour Stéphane et bienvenue !

      j’avais ce site en réserve depuis très longtemps en fait et j’étais restée bloquée sur le « comment » !

      C’est bien, on vous fournit les images mais on ne vous dit pas comment les intégrer…
      c’est ce que j’appelle du « travail à moitié fait ». 😉

      Puis j’ai retrouvé dans ma malle aux trésors une vidéo avec le fichier contenant ce fichu code !
      C’est pas grand-chose mais si on ne l’a pas, où le trouver ?

      C’est idiot : vous passiez du temps à chercher les images et moi j’avais laissé tomber parce
      que je ne trouvais pas le temps de chercher le code ! 😀

      A bientôt, amicalement,
      Alexandra

  2. Jean-Louis
    Jean-Louis07-11-2011

    Bonjour Alexandra,

    Merci pour votre nouvelle trouvaille, cadeau bien intéressant.

    J’ai deux questions :

    – savez-vous comment afficher une image sur une vidéo, en attendant que la vidéo se charge ?

    – quel logiciel utilisez-vous pour réaliser vos vidéos ?

    Bien amicalement,

    Jean-Louis

    • AlxLem
      AlxLem07-11-2011

      Bonjour Jean-Louis et bienvenue ici ! 🙂

      Je vais peut-être répondre à votre première question d’abord…

      Pour réaliser mes vidéos, j’utilise Camtasia mais vous avez aussi Camstudio qui peut très bien faire l’affaire et qui est gratuit.

      Tout dépend de ce que vous voulez faire en fait. Il faut, à mon avis, mais je peux me tromper car je ne suis pas du tout spécialiste, penser en termes d’édition, à savoir : quel genre de vidéos voulez-vous réaliser ?

      Si vous envisagez des vidéos avec du montage, des effets, des choses assez développées alors bien sûr il vous faudra un outil à la hauteur comme Camtasia par exemple.

      Ensuite, pour la question d’afficher une image sur la vidéo en attendant qu’elle
      se charge, j’ai fait quelques recherches et ça semble un peu compliqué.
      Mais j’ai trouvé ceci (qui suppose d’utiliser JW Player) :
      http://www.longtailvideo.com/support/jw-player-setup-wizard

      En ce qui me concerne, j’utilise deux « médias » qui se chargent de cette question : YouTube qui propose de choisir une « miniature » de votre vidéo parmi un choix de trois images et Easy Video Player (script très complet pour héberger et customiser vos vidéos) qui inclut cette fonctionnalité, du coup, soit je prépare mes images si je veux un écran un peu élaboré, soit je « capture » une image à l’intérieur de ma vidéo à partir du lecteur Media Player Classic qui est un excellent lecteur universel.

      A bientôt Jean-Louis, 🙂
      Alexandra

      • Jean-Louis
        Jean-Louis07-13-2011

        Bonjour Alexandra,

        Merci pour cette réponse, très détaillée, comme à votre habitude ; je vais « essayer » d’en faire bon usage…

        A tout bientôt,

        Jean-Louis

        • Alexandra
          Alexandra07-14-2011

          Merci Jean-Louis,

          j’ai oublié de dire que pour mes montages, j’utilise aussi Windows Movie Maker ou Windows Live Movie Maker, tous les deux gratuits et qui me permettent de m’amuser pas mal. 🙂

          Seulement, vous savez, comme je suis complètement autodidacte dans ce domaine, il y a forcément plein d’astuces que je ne connais pas et j’en apprends à chaque nouvelle vidéo.

          Amicalement,
          Alexandra

Laisser une réponse

CommentLuv badge

Ce blog utilise CommentLuv Premium qui vous autorise à associer des mots-clés à votre nom si vous avez effectué 3 commentaires approuvés. Utilisez votre vrai nom puis @ et vos mots-clés (maximum de 5).

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.