18041 sujets

Questions générales et questions de débutants

Animation de chargement de page

bonjour a tous je débute en programmation web, et je cher a faire une animation de chargement de page.

je voudrait mettre une image au centre de l'écran et que elle face un effet de chargement avec un dégrader de 50% qui défile de gauche vers la droite, de manière a avoir l'image d'origine qui soit afficher sans opacité a la fin du chargement. Smiley biggrin Smiley biggrin

merci par avance
Bonjour Greg,
en soi c'est tout simple, si tu maîtrises le css niveau 3 (css3) et quelques rudiments de javascript.

Le principe est le suivant :
1. à ton id est attribué un class originel dans le html
2. tu lui prévois un autre class où tu modifies les attributs de propriétés, avec un effet de transition appliqué aux propriétés
3. ensuite tu affectes à ce changement de class une fonction js
4. au chargement de la page tu exécutes cette fonction, après un setTimeout 'tampon' de 1 ou 2s ou une ligne de js qui s'assure que la page est entièrement chargée avant de lancer ton animation (ou l'inverse, mais sans garantie de bon résultat si ta page est 'lourde').
5. ha ! j'oubliais de préciser que ton id est un conteneur en overflow:hidden qui contient ton image ; tu joueras sur le width du conteneur en transition (de 0px à 500px par exemple) dans le basculement de class ... ou n'importe quoi d'autre même avec ton image. La fonction js contiendrait alors le basculement simultané des class des 2 éléments. Tu pourrait y superposer un cache à opacity variable, etc. etc. Mais reste simple quand même ! parce que ce n'est qu'un 'effet visuel'.

Voilà voilà ...

Si tu veux un exemple concret de que ce principe donne, où un lecteur.swf (actif) gambade de gauche à droite au chargement, de même qu'un menu auto-dynamique se déploie : http://sentrais.eu/aventures-chinonaises.htm

Ce principe y est appliqué également pour l'agrandissement et la réduction d'images depuis 2 cibles (miniatures et/ou agrandissements) quelconques (c-a-d croisés). Lis-y dans le code css et js ce qui t'intéresse, tu devrais comprendre comment ça marche ...

Cela te semblerait de la fine mécanique d'horloger, mais en oeuvrant avec méthode et circonspection, pièce par pièce tu arriveras rapidement à obtenir un mécanisme qui fonctionnera sans accroc.

Maintenant si tu veux qu'une img renseigne de l'état réel du chargement de la page et s'aligne sur sa progression en 'temps réel', cela risque fort d'être contradictoire ou conflictuel par css et js. Pour ça, d'autres Alsanautes te renseigneraient peut-être ... Et je devine que ton img sera de toute façon 'minimaliste'.
Modifié par pictural (17 Aug 2015 - 19:37)
Bonjour.
Un exemple avec une image pompée sur la toile (testé, fonctionne) :
<!DOCTYPE html>
<HTML><HEAD>
     <style>
     #container {
          width: 640px; height: 480px;
          margin: 20px auto;              
          border: 1px solid black;
          overflow: hidden;          
          }
     #myImg {          
          margin-left: -640px;
          opacity: 0;
          transition: margin-left 2s, opacity 4s;          
          }
     </style>
     <script type="text/javascript">
     function slide() {
          myImg.style.marginLeft = "0px" ;
          myImg.style.opacity = 1 ;
          }
     </script>     
</HEAD><BODY onload="slide()">
     <div id="container" onclick="slide()">
          <img id="myImg" src="http://www.igihe.bi/IMG/jpg/rhinoceros.jpg">
     </div>     
</BODY></HTML>
P.S : La transition n'est pas opérationnelle pour IE <= 9.0...
Modifié par ht1cd (18 Aug 2015 - 18:50)
ht1cd a écrit :
Un exemple (...)
Salut Ht1cd,
le niveau de priorité dont tu t'assures en plaçant le <script> dans le <head> est judicieux, puis également en faisant exécuter ce <script> dans le <body onload="...">

L'exemple est simplissime, et qui fonctionne. Sauf qu'il sera prudent de déclarer la variable MyImg !

Mais dans le cas d'une page beaucoup plus 'lourde', cet effet de transition risque de se retrouver 'bien seul' avant que la page entière ne se charge à sa suite et simultanément ! Et si d'autres <script> s'exécutaient au chargement de la page, il y aurait immanquablement un conflit (assassin !) entre leur exécution depuis leur fichier et le <body onload="..."> : c'est à prévoir, c'est à négocier !

Il me semble que de toutes les façons, l'exécution de ce <script> devrait être la dernière chose à mener ; mais à ce moment-là (idéal), cet effet ne pourra plus signifier un pseudo chargement de la page. Ou alors qu'il soit ultra minimaliste comme une barre de chargement, ce que Greg avait peut-être envisagé assez confusément ! Note : un .gif animé sera bloqué !

Il y a une autre façon d'envisager la question : par défaut. Aussi longtemps que la page n'est pas entièrement chargée, une note fixe ('chargement ...') apparaît, donc sans animation parce que celle-ci mange de la ressource, et que cette ressource consommée pour cet effet de transition n'est pas disponible pour l'essentiel ! C'est ce que j'avais dû aménager pour les pages de mon site web dont plusieurs mettent en cache deux centaines d'images (!) : c'était élémentaire de renseigner le visiteur.
Modifié par pictural (18 Aug 2015 - 14:22)
@ Pictural : Bonjour.
C'était juste un petit exemple pour aider greg3487... A lui ensuite de l'adapter à son projet, dont nous ignorons tout, vous en conviendrez.....
Quant à l'évènement onload, il se déclenche après que la page ait été chargée...
Je ne pense pas qu'il y ait d'effet pervers, la transition démarre après que l'image ait été "fully loaded"...
Cdlt
Modifié par ht1cd (19 Aug 2015 - 10:26)
ht1cd a écrit :
(...) Quant à l'évènement onload, il se déclenche après que la page ait été chargée...

J'en conviens mais d'une façon générale le javascript intégré au html (et précisément au <body onload="...">) induit vite bien des problèmes. Pour ma part je l'ai définitivement exclu, 'cause la fragmentation des instances.

Dans cette perspective je suggère, en reprenant ton exemple :
<script>
function slide()
{
myImg.style.marginLeft = "0px" ;
myImg.style.opacity = 1 ;
}
window.onload=slide; /* Il n'y aura pour la page qu'un window.onload qui devra reprendre tous les js 'auto-exécutables' */
     </script>
J'ai d'emblée présumé que la page de Greg proposait davantage de 'choses'.
Modifié par pictural (18 Aug 2015 - 15:41)
pictural a écrit :

J'en conviens mais d'une façon générale le javascript intégré au html (et précisément au &lt;body onload="..."&gt;) induit vite bien des problèmes


ça induit des problèmes si tu programme comme un Smiley saoul


après "visuellement" (au niveau du code) c'est mieux avec document.readyState pour un full js
Modifié par JENCAL (18 Aug 2015 - 16:02)
JENCAL a écrit :
ça induit des problèmes si tu programme comme un Smiley saoul (...)

Dans une longueur de page html on passe tous par une phase de Smiley saoul hi hi ! C'est pourquoi que je jacte à être prévoyant ... quand on finit par voir deux écrans, deux claviers, deux souris et que pour faire malin on s'ose à un <body onload="..."> parce qu'on a tout oublié du bel ouvrage mené à jeun.
Modifié par pictural (18 Aug 2015 - 16:16)
Ce que dit la doc ad-hoc ~~~> http://www.w3schools.com/jsref/event_onload.asp
" onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). "

Autrement dit, la fonction associée à l'évènement onload, s'exécutera APRES que la page ait été chargée !..
<!DOCTYPE html>
<HTML><HEAD>
     <style>
     #container {
          width: 640px; height: 480px;
          margin: 20px auto;              
          border: 1px solid black;
          overflow: hidden;          
          }
     #myImg {          
          margin-left: -640px;
          opacity: 0;
          transition: margin-left 2s, opacity 4s;          
          }
     </style>
     <script type="text/javascript">
     function slide() {
          myImg.style.marginLeft = "0px" ;
          myImg.style.opacity = 1 ;
          }
     </script>     
</HEAD><BODY onload="slide()">
     <div id="container" onclick="slide()">
          <img id="myImg" src="http://www.igihe.bi/IMG/jpg/rhinoceros.jpg">
     </div>     
</BODY></HTML>
.
Modifié par ht1cd (19 Aug 2015 - 10:21)
Donc, on va jouer sur le premier élément <a id="premier" onload="slide()"> de la page pour lancer une animation css3 par js. Sans garantie de bon résultat, je le maintiens à cause de ce qui suivrait dans la page : un js peut-il s'exécuter lors du loading ? ... A voir, selon les cas.

Quant au document.readyState suggéré par Jencal http://www.w3schools.com/jsref/prop_doc_readystate.asp
la question reste entière : js et css3_transition sont-ils actifs et performants pendant le loading ?

D'autres idées ? D'autres avis ?
Modifié par pictural (18 Aug 2015 - 17:06)
Sujet clos
Aller à